SVG Recipe

Painting: Filling, Stroking and Marker Symbols / marker

Last modified:

arrowhead


<svg width="200" height="124">
  <defs>
    <marker id="pm1" viewBox="0 0 10 10" refX="3" refY="5" markerUnits="strokeWidth" orient="auto">
      <path d="M0,0 L10,5 L0,10z" fill="#FF9E00"/>
    </marker>
  </defs>
  <path d="M10,62 l15,-20 30,40 30,-40 30,40 30,-40 30,40 15,-20" fill="none" 
        stroke="#FF9E00" stroke-width="4" marker-end="url(#pm1)"/>
</svg>


polymarkers


<svg width="200" height="124">
  <defs>
    <marker id="pm21" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth">
      <circle cx="5" cy="5" r="4" fill="white" stroke="#0E51A7" stroke-width="1"/>
    </marker>
    <marker id="pm22" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth">
      <circle cx="5" cy="5" r="4" fill="white" stroke="#0E51A7" stroke-width="1"/>
      <circle cx="5" cy="5" r="2" fill="#0E51A7"/>
    </marker>
  </defs>
  <path d="M10,62 l15,-20 30,40 30,-40 30,40 30,-40 30,40 15,-20" fill="none" 
        stroke="#0E51A7" stroke-width="5" 
        marker-start="url(#pm22)" marker-mid="url(#pm21)" marker-end="url(#pm22)"/>
</svg>