marker-003-ref.svg

Enable keyboard shortcuts

Checkerboard

<svg width="500" height="500"

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

  xmlns:html="http://www.w3.org/1999/xhtml">

    <defs>

      <marker id="marker1" markerUnits="strokeWidth" refX="50" refY="50" markerWidth="5" markerHeight="5" viewBox="0 0 100 100">

        <rect width="100" height="100" fill="royalblue" stroke="none"/>

      </marker>

    </defs>

    <text font-size="20" x="240" y="28" text-anchor="middle">'marker' property test</text>

    <g fill="gold" stroke="black" fill-rule="evenodd" transform="translate(50,20)"

        marker-start="url(#marker1)" marker-mid="url(#marker1)" marker-end="url(#marker1)">

      <path d="M10,60 Q90,60 90,140 Q10,140 10,60 Z M10,140 Q10,60 90,60 Q90,140 10,140 Z M50,70 L80,100 50,130 20,100 Z"/>

      <polygon points="100,60 120,140 140,60 160,140 180,60 180,100 100,100"/>

      <polyline points="190,60 210,140 230,60 250,140 270,60 270,100 190,100"/>

      <line x1="280" x2="370" y1="60" y2="140"/>

      <line x1="370" x2="280" y1="60" y2="140"/>

    </g>

</svg>