SVG Markers (Using)

By mbystedt on Feb 27, 2014, 5:15:32 PM

Markers allow you to add a shape you define to the start, end or joints of line-type elements in SVG. These built-in markers scale, rotate and translate along with the line. This offers a much better alternative to manually placing markers yourself. I decided to be conservative on the page and not put anything offensive on a stick. So, you get arrows on a stick.

See: Defining a Marker

<defs><marker id="myMarker" viewBox="0 0 10 10" refX="1" refY="5" 
  markerUnits="strokeWidth" orient="auto"
  markerWidth="4" markerHeight="3">
  <polyline points="0,0 10,5 0,10 1,5" fill="darkblue" />
</marker></defs>
.... 
<line x1="20" y1="10" x2="130" y2="140" stroke="blue" 
  stroke-width="20" marker-end="url(#myMarker)" />

Code 1. A line using a marker. See svg image above. (Download)

Markers can be placed on the vertices of lines, polylines, polygons and paths. These elements can use the marker attributes marker-start, marker-mid and marker-end which inherit by default or can be set to 'none' or the URI of a defined marker.

Attribute	Values	Initial	Comments
marker-start	(none\|inherit\|url)	inherit	Add a marker at the start of a line or path.
marker-mid	(none\|inherit\|url)	inherit	Add a marker at the joints of a line or path.
marker-end	(none\|inherit\|url)	inherit	Add a marker at the end of a line or path.

See: Marker Attribute Reference

You must first define the marker before you can reference it via its URI. Any kind of shape can be put inside a marker. They are drawn on top of the element they are attached to.

The marker does not modify the line it is attached to. Adding a marker won't change a solid line to a dashed line. See: Filling and Stroking Shapes