SVG stroke rendering/browser issue

[EJ29]

Hey all,

 

I'm inexperienced with SVG and animations in general, so please bear with me.

I am creating a dial with several animating arcs. It works well in Chrome on my computer but when I look on the iPad (either Safari or Chrome), the arcs don't appear*. So I made a very cut-down codepen of it (attached) and looked at it in Chrome and Safari on my computer. It looks fine in Chrome, completely different in Safari. What gives?

 

*ETA actually, if I rotate the iPad from its original orientation to the other, the arcs do then appear where they should - and then stay when I return the orientation to as it was, but no animation of them occurs.

See the Pen OQeJaO by anon (@anon) on CodePen

[Carl]

Thanks for the demo. 

It seems various browsers have different rules when it comes to animating things in <defs>. Safest to avoid that. If you animate an actual path you should get consistent results.

 

See the Pen LQKGKQ by anon (@anon) on CodePen

 

Frankly, I can't keep track of all the quirks but this thread is good to read every few months: 

 

I suspect there are some SVG experts around here who could give you some more specific details.