SVG Markers (Using)
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)" />
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.
Add a marker at the start of a line or path.
Add a marker at the joints of a line or path.
Add a marker at the end of a line or path.
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