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#circle
marker and one#arrow
marker - 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-start
attribute and themarker-end
attribute
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#circle
marker and one#arrow
marker - 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-start
attribute, themarker-mid
attribute and themarker-end
attribute - Notice that the
marker-start
attribute and themarker-mid
attribute points to the same marker (#circle
). This way markers can be re-used multiple times