UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Example URL:
https://jsfiddle.net/42y1d30m/3/

Steps to reproduce the problem:
1. Visit https://jsfiddle.net/42y1d30m/3/ or try the code below

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">

  <path d="M56.2,66.2a174.8,174.8,0,1,0,276.0,-2.0" id="myArcPath"
        stroke="lightgrey" fill="none" stroke-width="1"/>

</svg>

var path = document.getElementById("myArcPath");
var len = path.getTotalLength();

var direction = 1;
var step = len / 100;

for (var i=0; i<=99; i++)
{
  // For each step along the arc, draw a tangent line to show the results of getPointAtLength()
  var startLoc = path.getPointAtLength(i * step);
  var endLoc = path.getPointAtLength((i+1) * step);
  var dx = endLoc.x - startLoc.x;
  var dy = endLoc.y - startLoc.y;

  var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
  line.x1.baseVal.value = startLoc.x;
  line.y1.baseVal.value = startLoc.y;
  line.x2.baseVal.value = startLoc.x + dx * 10;
  line.y2.baseVal.value = startLoc.y + dy * 10;
  line.style.stroke = "red";
  path.ownerSVGElement.appendChild(line);
}

What is the expected behavior?
Regular and congruent spacing and length of tangent lines.

What went wrong?
Tangent lines over first half to 2/3 of arc are jumbled and irregular.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 57.0.2987.133  Channel: n/a
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: 

Originally noticed by complainant on Stack Overflow: http://stackoverflow.com/questions/43799741/element-rotation-with-point-along-path-interpolation-not-possible-on-path-with
 

Deleted: Capture.PNG 61.8 KB

	Capture.PNG 61.8 KB View Download