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 <path> element inside the <svg>.

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

Alternatively you may use <animateTransform> in your SVG file.

See DEMO

Answer 2

I have a working example:

http://jsfiddle.net/4h3xL/1/

The problem with this answer is that the x="" and y="" attributes don't work on all svg elements, in your case they are valid on the text element but not the path.

My answer involves css transform: translate(). These values (along with the inline path attribute transform="translate()") get reset when you try to run an animation on the same element, as the animation is also a transform - transform: rotate(). I tried to chain the translate onto the rotate, but this weirdly didn't work in FF either.

I wrapped the path in two g's. The path and the outer group are used for offset/reset alignment, and the middle one for the animation.