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://jsfiddle.net/fL8Qn/

The gear is a path in a SVG file:

<div class="svg">
    <svg x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <title>PDP</title>
    <text x="44" y="120" class="gear_text">PDP</text>
    <g transform="translate(50%, 50%)">
        <path id="gear1" class="gear go-clockwise" x="0px" y="0px" d="m91.63252,0l-4.16735,23.73752l0.01604,0.01606c-5.09374,0.83228 -10.02215,2.16622 -14.72963,3.9428l0,-0.01584l-15.46727,-18.48038l-14.53742,8.39871l8.25439,22.63163l0.03211,0.01585c-3.9412,3.23531 -7.55353,6.86028 -10.78684,10.8031l-0.01604,-0.04816l-22.63164,-8.25463l-8.39871,14.53743l18.48035,15.48333c-1.77354,4.70347 -3.09585,9.62447 -3.92695,14.71362l-0.01604,-0.01586l-23.73753,4.16734l0,16.79736l23.73753,4.16735l0.01604,-0.01587c0.83109,5.08915 2.15341,10.01014 3.92695,14.71381l-18.48035,15.48312l8.39871,14.53743l22.63164,-8.25444l0.01604,-0.04832c3.23331,3.94261 6.84564,7.56799 10.78684,10.80287l-0.03211,0.0159l-8.25439,22.63168l14.53742,8.39873l15.46727,-18.48027l0,-0.01582c4.70748,1.77637 9.63589,3.11047 14.72963,3.94278l-0.01604,0.01587l4.16735,23.73772l16.78132,0l4.16733,-23.73772l-0.01603,-0.01587c5.09294,-0.83009 10.02274,-2.15297 14.72985,-3.92696l15.4831,18.48047l14.53743,-8.39871l-8.27046,-22.63173c3.93234,-3.22687 7.54289,-6.83942 10.771,-10.7708l22.64757,8.25439l8.38263,-14.53741l-18.4642,-15.48308c1.77402,-4.70432 3.11153,-9.62388 3.94283,-14.71384l23.73775,-4.15126l0,-16.79738l-23.73775,-4.16735c-0.83148,-5.08432 -2.17067,-9.99828 -3.94283,-14.69775l18.4642,-15.4831l-8.38263,-14.53745l-22.64757,8.25443c-3.2281,-3.93136 -6.83842,-7.54391 -10.771,-10.77079l8.27046,-22.63168l-14.53743,-8.39871l-15.4831,18.48042c-4.70711,-1.77378 -9.63691,-3.09688 -14.72985,-3.92696l0.01603,-0.01586l-4.16733,-23.73761l-16.78132,0l0,-0.00011l0,0zm8.39869,40.8716c32.67677,0 59.17564,26.48283 59.17564,59.1596c0,32.67677 -26.49887,59.15962 -59.17564,59.15962c-32.67677,0 -59.15962,-26.48285 -59.15962,-59.15962c0,-32.67677 26.48286,-59.1596 59.15962,-59.1596z" stroke-dashoffset="0" stroke-miterlimit="4" stroke-linejoin="round" stroke-linecap="round" stroke-width="2"/>
    </g>
</svg>

And the animation is applied using CSS:

.svg {
  width:200px;
  height:200px;
  float:left;
  position: fixed;
  top: 20px;
  left: 50px;
}

.go-clockwise {
  -webkit-animation: clockwise 3s infinite linear;
  -moz-animation: clockwise 3s infinite linear;
}

.go-counter-clockwise {
  -webkit-animation: counter-clockwise 3s infinite linear;
  -moz-animation: counter-clockwise 3s infinite linear;
}
path.gear{
  fill: #3f3f3f;
}
text.gear_text{
  font-size: 55px;
  font-weight: 900;
  fill: #3f3f3f;
}

@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }
}

@-moz-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }
}

@-webkit-keyframes counter-clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }

  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }
}

@-moz-keyframes counter-clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }

  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;
  }
}

Using CSS is the preferred approach because I am applying the class dynamically. (counter clockwise when scrolling down, clockwise while scrolling up) but for the purposes of this question I’m just applying the one class. Chrome renders it fine, but Firefox doesnt seem to pick up on the -moz-transform-origin property. No matter what I use, firefox seems to be applying the transformation from an origin of (0,0) whereas Chrome picks up on the transform-origin property and works correctly.

I've tried just about everything I could find. Anyone have any ideas?

score 11 · Accepted Answer · edited May 23 '17 at 12:33

11

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.

edited May 23 '17 at 12:33

Community

1
1

answered Sep 22 '13 at 10:57

daviestar

4,531
3
29
47

I also found this answer but I don't see how I can use it to solve the issue. In the fiddle you'll see I added around the element to try and get that fix to work. Ive tried pixel values too. No matter what I try the path always rotates around it's (0,0) origin. Do you have a working example of what you got to work? – Fingel Sep 22 '13 at 15:43
no time to create a demo right now, but you should try translate(-50% -50%) – daviestar Sep 23 '13 at 00:30
hey, updated my jsfiddle link, realised it hadn't saved properly – daviestar Sep 24 '13 at 12:39
This did it! Still quite convoluted in my opinion, but to be fair svg and css animation seem pretty edge. Thank you! – Fingel Sep 25 '13 at 20:35
yeah, convoluted is right. i tried many other options but in the end the extra g tag was all that worked. the worst part is you can't use percentages on translate in svg, so can't be responsive. – daviestar Sep 26 '13 at 00:04

Netsurfer · Answer 2 · 2013-09-22T10:15:09.913

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

edited Sep 22 '13 at 10:15

answered Sep 21 '13 at 22:52

Netsurfer

5,543
2
29
34

Thanks for the tips. animateTransoform looks like it works but can I enable/disable or add/remove it programmaticaly? The original idea is that the logo will only spin when the page is scrolling, I use javascript to add the class that contains the animation and remove it when scrolling stops. – Fingel Sep 22 '13 at 15:45

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

2 Answers2

Linked

Related