title: SVG transform rotate by 90, 180 or 270 degrees not working on circle in Safari iOS 10
body: <p>I want to create a donut chart using an SVG circle element by setting <code>stroke-dasharray</code> and varying <code>stroke-dashoffset</code>. The SVG element needs to be rotated by 270 (or -90) degrees in order for the chart "bar" to start at the top. Here is the code:</p>
  
  <p><a href="http://jsfiddle.net/q3wb6gkq/" rel="noreferrer">http://jsfiddle.net/q3wb6gkq/</a></p>
  
  <p>The rotation angle is specified using the first number in <code>transform="rotate(270, 80, 80)"</code>.</p>
  
  <p>The problem is: when viewed in Safari on iOS 10 this rotation is not applied. In fact, setting 90, 180 or 270 degree rotation has no effect. The same angles but negative (for example -90) are also not applied.</p>
  
  <p>Here is a screenshot of the above fiddle in Safari on iOS 10.0.1:</p>
  
  <p><a href="https://i.stack.imgur.com/7nzXJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7nzXJ.png" alt="iOS 10 screenshot"></a></p>
  
  <p>And here is the same fiddle in Safari on iOS 9.3.5:</p>
  
  <p><a href="https://i.stack.imgur.com/kh5As.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kh5As.png" alt="iOS 9 screenshot"></a></p>
  
  <p>As a workaround, I have found that using something like 270.1 degrees solves the problem, however I would like to know why 270 is not working and if there is a better way of dealing with it.</p>