marker-path-ref.svg

Enable keyboard shortcuts

Checkerboard

<?xml version="1.0" encoding="UTF-8"?>

<svg xmlns="http://www.w3.org/2000/svg"

     xmlns:h="http://www.w3.org/1999/xhtml" width="300" height="300">

  <defs>

    <marker id="Start"

            viewBox="0 0 10 10" refX="0" refY="5"

            markerUnits="strokeWidth"

            markerWidth="10"

            markerHeight="10"

            orient="auto"

            overflow="visible"

            fill="green">

      <path d="M 0 0 L 10 5 L 0 10 z"/>

    </marker>

    <marker id="Mid"

            viewBox="0 0 10 10" refX="0" refY="5"

            markerUnits="strokeWidth"

            markerWidth="10"

            markerHeight="10"

            orient="auto"

            overflow="visible"

            fill="orange">

      <path d="M 0 0 L 10 5 L 0 10 z"/>

    </marker>

    <marker id="End"

            viewBox="0 0 10 10" refX="0" refY="5"

            markerUnits="strokeWidth"

            markerWidth="10"

            markerHeight="10"

            orient="auto"

            overflow="visible"

            fill="blue">

      <path d="M 0 0 L 10 5 L 0 10 z"/>

    </marker>

  </defs>

  <g style="fill:none;stroke:black;stroke-width:2;marker-start:url(#Start);marker-mid:url(#Mid);marker-end:url(#End)">

    <path d="M 50,50  l 50,0  l 50,0   l 50,0"/>

    <path d="M 50,100 l 50,20 l 50,-20 l 50,20"/>

    <path d="M 50,150 h 50 v 50 h 50"/>

  </g>

</svg>