stroke-dashoffset-and-pathLength-01.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

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

  <title>Test stroke-dashoffset with pathLength</title>

  <!--

    The path is much longer than 100 user units, so if the pathLength is not

    factored into the stroke-dashoffset calculation, the stroke will be visible.

    A correct implementation will see the first dash pushed off the end of the

    path which will mean that the path does not display at all.

-->

  <style>

    path {

      fill: none;

      stroke-width: 5;

      stroke: red;

      stroke-dasharray: 100;

      stroke-dashoffset: 100;

  </style>

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

  <path pathLength="100" d="M175,25 A150,150,0,1,1,175,325 A150,150,0,1,1,175,25"/>

</svg>