title: what is the basis of percent values for svg stroke-dashoffset
body: <p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset</a></p>
  
  <p>According to the link above, the stroke-dashoffset css property accepts percents. </p>
  
  <p>What is the value that the percent is a percent of? </p>
  
  <p>I expected it to the be the total length of the path. But in some experimentation that doesn't seem to be the case. </p>
  
  <p>Here I try to animate from 0% to 100%...</p>
  
  <pre><code>.circles {
      stroke-dasharray: 50%;
      animation-name: dashingRotation;
      animation-duration: 2s;
      animation-iteration-count: infinite;
  }
  
  @keyframes dashingRotation {
      0%     {stroke-dashoffset: 0%;}
      50%    {stroke-dashoffset: 100%;}
      100%   {stroke-dashoffset: 100%}
  }
  </code></pre>
  
  <p>full code: <a href="https://jsfiddle.net/tssn40yL/" rel="nofollow noreferrer">https://jsfiddle.net/tssn40yL/</a></p>
  
  <p>... but the dashes do not take up half the circles and the animation does not go all the way around. </p>
  
  <p>So what do does that percent reference? </p>