Friday, April 19, 2013

SVG - Draw Arrow

SVG 

Sample 1



<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -100 200 200">
<defs>
  <marker id='mid' orient="auto"
    markerWidth='2' markerHeight='4'
    refX='0.1' refY='1'>
    <!-- triangle pointing right (+x) -->
    <path d='M0,0 V2 L1,1 Z' fill="orange"/>
  </marker>
  <marker id='head' orient="auto"
    markerWidth='2' markerHeight='4'
    refX='0.1' refY='2'>
    <!-- triangle pointing right (+x) -->
    <path d='M0,0 V4 L2,2 Z' fill="red"/>
  </marker>
</defs>

<path
  id='arrow-line'
  marker-mid='url(#mid)'
  marker-end='url(#head)'
  stroke-width='5'
  fill='none' stroke='black'  
  d='M0,0 L20,20 C40,40 40,40 60,20 L80,0'
  />
</svg>
 

Result 

enter image description here









Sample 2

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
 <defs>
  <marker id="Triangle" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
   <path d="M 0 0 L 20 10 L 0 20 z"/>
  </marker>
  <marker id="Circle" viewBox="0 0 10 10" refX="4" refY="10" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
   <circle cx="5" cy="5"  r="3" fill="black"/>
  </marker>
  <marker id="Rect" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto">
   <rect width="10" height="10" fill="grey"/>
  </marker>
 </defs>
 
 <line x1="10" y1="10" x2="100" y2="10" stroke="black" stroke-width="1" marker-end="url(#Triangle)" marker-start="url(#Circle)"/>
 <path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" marker-end="url(#Triangle)" marker-mid="url(#Rect)" fill="none" stroke="black"/>
 </svg> 
 

Result
 
Reference: http://stackoverflow.com/questions/11808860/arrow-triangles-on-my-svg-line

XSL - Loop/Recursive

Lopp/Recursive Template

<xsl:template name="recursive">
  <xsl:param name="num" />
  <xsl:if test="not($num = 500)">
  do something ...
  <xsl:call-template name="recursive">
     <xsl:with-param name="num" select="$num + 50" />
  </xsl:call-template>
</xsl:if>
</xsl:template>

Call Template

<xsl:call-template name="recursive">
     <xsl:with-param name="num" select="0" />
</xsl:call-template>

Reference

http://stackoverflow.com/questions/13199515/xsl-loop-inside-a-template

SVG - Gradient in XSL with FOP

graidient.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:green" />
      <stop offset="50%" style="stop-color:yellow" />
      <stop offset="100%" style="stop-color:red" />
    </linearGradient>
  </defs>
</svg>  

gradient.xsl

<fo:instream-foreign-object>
<svg:svg version="1.1" preserveAspectRatio="xMinYMin"               xmlns:svg="http://www.w3.org/2000/svg">

<svg:rect x="0" y="0" height="2cm"
<svg:rect x="0" y="100" width="{$width}" height="2cm" style="fill:url('gradient.svg#linearGradient'); stroke: none;" />

</svg:svg>
</fo:instream-foreign-object>

Result


 

Reference


I have problems with SVG referring to gradients etc. using "uri(#stuff)".
I get a MalformedURLException.

This is really a "resolving relative URI" problem with some twists. The problem is that the #stuff URL fragment identifier is resolved within the current SVG document. So the reference must be valid within the XML subset and it cannot reference other SVG documents in the same XML file. Some options to try:
  • Put the SVG into a separate file and use it with fo:external-graphics.
  • Use a separate SVG file which contains only the gradient (and perhaps other SVG stuff you want to reference) and point an absolute URL to it: fill="url(file:///c:/refstuff/grad.svg#PurpleToWhite)".
  • Same as above but use a relative URL: fill="url(grad.svg#PurpleToWhite)". This may be easier to deploy.
  • Make sure that the reference is valid in the current SVG document.
In any case, the referenced stuff has to be pointed to by an URL. It doesn't necessarily have to be a file URL, HTTP should also work. Also, expect a performance hit in all cases, because another XML file has to be retrieved and parsed.
Ultimately, both FOP and especially Batik should be fixed to make your code work as expected, but this will not only take some time but also some effort by a standard committee in order to make the semantics of this kind of references in embedded SVG clearer.


Source: http://xmlgraphics.apache.org/fop/faq.html 

Thursday, April 18, 2013