pathLength-02.svg - mozsearch

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

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

-->

<svg viewBox="0 0 100 2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">

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

  <!-- This path is really 400 units long (and its halfway point is at the

       right edge of our viewBox). We use pathLength to normalize its length

       to 20, though, so the first 5-unit-long dash in stroke-dasharray ends

       up covering 5/20 = 1/4 of the path. The hole in the dasharray spans

       the viewBox -->

	<path d="M-100,1 h400" pathLength="20" stroke-dasharray="5" fill="none" stroke="red" stroke-width="2"/>

</svg>