SVG <marker>
SVG Marker - <marker>
The <marker> element is used to create a
marker for the start, mid, and end of a <line>, <path>, <polyline>
or <polygon>.
All SVG markers are defined within a <defs>
element. The <defs> element is short for
"definitions", and contains definition of special elements (such as
markers).
The marker is attached to the shapes using the
marker-start, marker-mid, and
marker-end attributes.
The <marker> element has six basic attributes to position and set the
size of the marker:
| Attribute | Description |
|---|---|
| id | The unique id for the marker |
| markerHeight | The height of the marker. Default is 3 |
| markerWidth | The width of the marker. Default is 3 |
| refX | The x position where the marker connects with the vertex. Default is 0 |
| refY | The y position where the marker connects with the vertex. Default is 0 |
| orient | The orientation of the marker relative to the shape it is attached to. Can be "auto", "auto-start-reverse" or an angle. Default is 0 |
A Line with Start and End Marker
The following example creates a line with a circular start marker and an arrowhead end marker:
Here is the SVG code:
Example
<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="3" fill="black" />
</marker>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10
z" fill="black" />
</marker>
</defs>
<line x1="10" y1="10" x2="300" y2="200"
stroke="red" stroke-width="3" marker-start="url(#circle)" marker-end="url(#arrow)"
/>
</svg>
Try it Yourself »
Code explanation:
- The
<defs>element contains two markers: one#circlemarker and one#arrowmarker - The shape of the marker is defined in the
<marker>element - The first
<marker>element contains a<circle>element that draws a small circle - The second
<marker>element contains a<path>element that draws a small triangle - The
<line>element references the two markers with themarker-startattribute and themarker-endattribute
Add a Mid Marker
The following example creates a polyline with a start marker, a mid marker and an end marker:
Here is the SVG code:
Example
<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="2" fill="black" />
</marker>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10
z" fill="black" />
</marker>
</defs>
<polyline points="15,40 15,170 200,170" stroke="red" stroke-width="3"
fill="none" marker-start="url(#circle)" marker-mid="url(#circle)"
marker-end="url(#arrow)" />
</svg>
Try it Yourself »
Code explanation:
- The
<defs>element contains two markers: one#circlemarker and one#arrowmarker - The shape of the marker is defined in the
<marker>element - The first
<marker>element contains a<circle>element that draws a small circle - The second
<marker>element contains a<path>element that draws a small triangle - The
<polyline>element references the two markers with themarker-startattribute, themarker-midattribute and themarker-endattribute - Notice that the
marker-startattribute and themarker-midattribute points to the same marker (#circle). This way markers can be re-used multiple times
