7.9 The marker element

<defs>
    <marker id="markerArrow" markerWidth="5" markerHeight="10" refX="5" refY="5" orient="auto" markerUnits="userSpaceOnUse">
     <!-- marker's shape -->
     <path d="M 0 0 5 5 0 10"
     style="fill:whitesmoke; fill-opacity:1; stroke:black" />
     </marker>
</defs>

• markeWidth="..." markerHeight="..." dimensions of marker's viewBox
• RefX="x" RefY="y" point(x,y) in marker's viewBox that will be attached to a given point in a path
• orient="auto" adjust orientation of a marker to the orientation of a path
• orient="angle" he marker will always be rotated by that angle in degrees
• markerUnits="strokeWidth" (default) this makes your marker grow in proportion to the stroke widths
• markerUnits="userSpaceOnUse" the marker's coordinates are presumed to be the same as the coordinate system of the object that references the marker.
  The marker will remain the same size irrespective of the stroke width.

• marker-start:url(#id_name) is attached to every vertex except the beginning and end of the path.
• marker-mid:url(#id_name) is attached to every vertex except the beginning and end of the path.
• marker-end:url(#id_name) is attached to every vertex except the beginning and end of the path.

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
   <path d="M 10 20 100 20 A 20 30 0 0 1 120 50 120 110"
   style="marker-start:url(#mCircle); fill:none; stroke:#900; stroke-width:2"/>
   
       <!-- Markers -->
       <defs>
       <!-- circle marker  -->
        <marker id="mCircle" markerWidth="10" markerHeight="10" refX="5" refY="5">
           <circle cx="5" cy="5" r="4"
           style="fill:whitesmoke; fill-opacity:1; stroke:black"/>
        </marker>
        <!--  arrow marker -->
        <marker id="mArrow" markerWidth="6" markerHeight="10" refX="4" refY="4" orient="auto" markerUnits="userSpaceOnUse">
           <path d="M 0 0 4 4 0 8 " style="fill:none; stroke:black"/>
        </marker>
       <!--  triangle marker -->
        <marker id="mTriangle" markerWidth="5" markerHeight="10" refX="5" refY="5" orient="90">
           <path d="M 0 0 5 5 0 10 Z " style="fill:black;"/>
        </marker>
       </defs>
   
   <path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
   style="
   marker-start:url(#mCircle);
   marker-mid:url(#mArrow);
   marker-end:url(#mTriangle);
   fill:none; stroke:#900; stroke-width:2"/>
</svg>

6.10 Marker miscellanea

Note 1

If you want the same marker at the beginning, middle, and end of a path, you don't need to specify all of the marker-start, marker-mid, and marker-end properties. Just use the marker property and have it reference the marker you want.

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
    style="
    marker:url(#mCircle);
    fill:none; stroke:#900; stroke-width:2"/>
</svg>

Note 2

It is also possible to set the viewBox and preserveAspectRatio attributes on a marker element to gain even more control over its display.

Note 3

You may reference a marker in a polygone, polyline, or line element as well as in a path.

Note 4

It is possible to apply a marker to a marker as a path (but it is not recommended). In that case the second marker must fit into the rectangle established by the first marker's markerWidth and markerHeight.