2

I have been doing some reading but have yet to find or put together a working solution for my problem. I have a group of paths of inline SVG that I need to rotate by its center. But the issue is FireFox doesn't interpret the transform-origin property on SVG elements. Does anybody have a workaround for this or can somebody point me in the right direction?

I've tried wrapping the group in another group and using the translate property to reposition everything but that didn't fix the issue. I have also tried using pixels instead of percentages with no luck either. Any help?

The Project: http://jsfiddle.net/jz09dr2m/

Target Element

#seconds-topper-tool
Yuschick
  • 2,642
  • 7
  • 32
  • 45
  • Did you have a look at this http://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox? – U r s u s Jan 13 '15 at 16:17
  • I had a same problem when I tried to create [this](http://codepen.io/chipChocolate/pen/zxxdjP). Hope it helps you. – Weafs.py Jan 13 '15 at 16:20
  • I have but with no luck. I think the amount of paths I have in my group could be causing an issue as opposed to one rect. – Yuschick Jan 13 '15 at 16:20

1 Answers1

0

Rotating SVG elements with CSS has a "bug" in FireFox (tested in v31). transform-origin does not work for svg elements. To rotate an element on a position other then top left you need to group the element with a position group and an animation group. Place the groups in the top-left corner of the SVG. Then calculate the postion of the element where it it should rotate and add the position of the element via css transform: translate(x,y);

Source: dribbble

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36
  • You can see a example here: http://codepen.io/evertslagter/pen/Gcgjk – Luís P. A. Jan 13 '15 at 16:23
  • transform-origin does work on SVG elements provided you avoid percentages. center being basically an alias for 50% likewise doesn't work. px and other units do work though. – Robert Longson Jan 13 '15 at 16:37
  • FireFox does not seem to translate any positions. I have the translates in place and everything is looking fine in Chrome but there is no change in Firefox. – Yuschick Jan 13 '15 at 17:19