I've created a Greensock animation with a circle that draws 90% and rotates so that text can be placed in the gap of the circle. It works everywhere but on iOS devices. (see codepen below)
http://codepen.io/sumnercreations/pen/KgRJzZ
I know that iOS still requires the -webkit prefix, as stated in this question Transform not Working on IOS, so I added that in the svg code, but it still doesn't work.
CSS Tricks says that this should work everywhere but I can't get it to work for me. https://css-tricks.com/transforms-on-svg-elements/
<!-- works everywhere -->
<rect x='65' y='65' width='150' height='80' transform='rotate(45)' />
Any ideas how to accomplish this on iOS devices?
Greensock replied to my tweet and explained that iOS draws circles in the opposite direction and so one solution would be to use <path> instead of <circle>. (they also mentioned that MorphSVGPlugin.convertToPath() http://greensock.com/morphSVG`) could also do it.
They included a codepen that worked perfectly. http://codepen.io/sumnercreations/pen/EgRovE