Parallelograms as SVG Polygons

---

Using the SVG marker Element

Consider the image in Figure 2.4.

Figure 2.4: A gradient arrow.

The SVG document in Listing 2.6 uses the SVG elements marker and linearGradient in order to render the gradient arrow in Figure 2.4.

Listing 2.6 linearGradientArrow1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg">   <defs>     <linearGradient        x1="0" y1="0" x2="20" y2="0"       gradientUnits="userSpaceOnUse">       <stop offset="0%"   stop-color="#FFFF00"/>       <stop offset="100%" stop-color="#000000"/>     </linearGradient>     <marker        refX="0" refY="4"       markerUnits="strokeWidth"       markerWidth="20" markerHeight="8"       fill="url(#gradientDefinition)"       orient="auto">       <path d="M0,0 l20,4 l-20,4 z"/>     </marker>   </defs>   <rect x="10" y="10" width="800" height="500"         fill="none"         stroke="blue" stroke-width="10"/>   <desc>Placing an arrowhead at the end of a path.</desc>   <path d="M 100,100 L 300,100"         stroke="red" stroke-width="4"         marker-end="url(#triangularMarker1)"/>   <path d="M 100,200 L 300,200"         stroke="red" stroke-width="4"         marker-end="url(#triangularMarker1)"/> </svg>

Remarks

Listing 2.6 contains the SVG marker element, which enables you to define more complex 'templates' that consist of other SVG elements. This example contains an SVG marker element in the SVG defs element that defines a triangle. The fill attribute of the specified triangle references a linear gradient that is also defined in the SVG defs element. Experiment with refX and refY attributes in the SVG marker element to see how changes in their values affect the rendered graphics image.

---