pathLength-positive.svg

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/path/distance/pathLength-positive.svg - WPT Dashboard Interop Dashboard

Checkerboard

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

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

     xmlns:xlink="http://www.w3.org/1999/xlink"

     width="300" height="200" viewBox="0 0 300 200">

  <metadata>

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

    <h:link rel="match" href="pathLength-positive-ref.svg"/>

    <h:meta name="assert" content="pathLength scales distance along the path"/>

  </metadata>

  <defs>

    <path id="track" stroke="lightblue" fill="none" d="M 50 50 h 200" pathLength="2"/>

  </defs>

<g>

    <use xlink:href="#track"/>

    <text font-family="sans-serif" font-size="28">

      <textPath xlink:href="#track" startOffset="0">The quick brown fox</textPath>

    </text>

  </g>

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

    <use xlink:href="#track"/>

    <text font-family="sans-serif" font-size="28">

      <textPath xlink:href="#track" startOffset="1">The quick brown fox</textPath>

    </text>

  </g>

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

    <use xlink:href="#track"/>

    <text font-family="sans-serif" font-size="28">

      <textPath xlink:href="#track" startOffset="-1">The quick brown fox</textPath>

    </text>

  </g>

</svg>