marker-path.svg - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/path/property/marker-path.svg - WPT Dashboard Interop Dashboard

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">

  <metadata>

    <h:link rel="help" href="https://svgwg.org/svg2-draft/paths.html#TheDProperty"/>

    <h:link rel="match" href="marker-path-ref.svg"/>

    <h:meta name="assert" content="d property is used for SVG markers."/>

  </metadata>

  <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 style='d: path("M 50,50  l 50,0  l 50,0   l 50,0");'/>

    <path style='d: path("M 50,100 l 50,20 l 50,-20 l 50,20");'/>

    <path style='d: path("M 50,150 h 50 v 50 h 50");'/>

  </g>

</svg>