pathLength-02.svg 695 B

1234567891011121314
  1. <!--
  2. Any copyright is dedicated to the Public Domain.
  3. http://creativecommons.org/publicdomain/zero/1.0/
  4. -->
  5. <svg viewBox="0 0 100 2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
  6. <rect width="100%" height="100%" fill="lime"/>
  7. <!-- This path is really 400 units long (and its halfway point is at the
  8. right edge of our viewBox). We use pathLength to normalize its length
  9. to 20, though, so the first 5-unit-long dash in stroke-dasharray ends
  10. up covering 5/20 = 1/4 of the path. The hole in the dasharray spans
  11. the viewBox -->
  12. <path d="M-100,1 h400" pathLength="20" stroke-dasharray="5" fill="none" stroke="red" stroke-width="2"/>
  13. </svg>