marker-orientation-05.svg

Enable keyboard shortcuts

Checkerboard

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

    <defs>

        <marker id="arrowAutoStartRev" orient="auto-start-reverse" markerUnits="userSpaceOnUse" overflow="visible">

            <path d="M25,25 L0,0 L0,50 z" fill="lime" stroke="lime" stroke-width="2" />

        </marker>

        <marker id="arrowSW" orient="135" markerUnits="userSpaceOnUse" overflow="visible">

            <path d="M25,25 L0,0 L0,50 z" fill="red"/>

        </marker>

        <marker id="arrowAuto" orient="auto" markerUnits="userSpaceOnUse" overflow="visible">

            <path d="M25,25 L0,0 L0,50 z" fill="red"/>

        </marker>

     </defs>

    <rect width="100%" height="100%" fill="lime" />

    <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowSW)" fill="none"/>

    <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowAutoStartRev)" fill="none"/>

    <g transform="translate(0, 50)">

      <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowAuto)" fill="none"/>

      <path d="M 340,100 h50 v50 h-50 z" marker-end="url(#arrowAutoStartRev)" fill="none"/>

    </g>

</svg>