transform-origin for CSS animation on SVG working in Chrome, not FF

Question

I am trying to create a simple animation using CSS and SVG: a rotating gear. The animation works perfectly in Chrome but not Firefox. Here is the code in action: http://jsfi

Answer 1

Seems as if Firefox has a "problem" with assigning the CSS animation to the element inside the .

If updated your jsFiddle and just moved the class attribute from to . Then it works as expected (except that the text now also rotates).

Alternatively you may use in your SVG file.

See DEMO