Offset/animation doesn't seem to be calculated properly when using vector-effect on the line

[alexgurr]

When I leave my polyline with default width scaling the library works fine. However when I introduce vector-effect="non-scaling-stroke" to it (which keeps the line width consistent across all aspect ratios and SVG sizes), the library animates the line incorrectly.

Clearly the line length calculation (distance between points) doesn't work when the line is scaled?

Without vector effect (working):

With vector effect (not working):

SVG to reproduce

<svg class="line-chart" preserveAspectRatio="xMaxYMin meet" viewBox="0 0 500 200"><polyline fill="none" stroke="#ffdebc" stroke-width="2" points="0,31.151015419361215 20.833333333333332,95.79551150138761 41.666666666666664,93.57810025862017 62.5,101.39948216678847 83.33333333333333,116.36552130454557 104.16666666666667,107.56839313850095 125,123.65082075060661 145.83333333333334,126.8350258447492 166.66666666666666,125.56409462044603 187.5,151.8270861649812 208.33333333333334,75.90138801468669 229.16666666666666,81.88742105812197 250,70.50733121756468 270.8333333333333,121.80405066398154 291.6666666666667,199 312.5,149.0294677305178 333.3333333333333,113.05074179286761 354.1666666666667,115.25886072811352 375,112.20492249631282 395.8333333333333,74.85404003035873 416.6666666666667,115.35093319263832 437.5,96.52858939299156 458.3333333333333,90.46699799336331 479.1666666666667,0" vector-effect="non-scaling-stroke" style="stroke-dasharray: 889.288, 889.288; stroke-dashoffset: 0;"></polyline></svg>

[alexgurr]

Maybe we can use something like this (another library I opened a PR into) -maxwellito/vivus#234