Setting transform-origin on SVG group not working in Firefox

Question

I am having an issue with getting transform-origin to work in Firefox (v.18+, other versions not tested). Webkit browsers work as expected. I'm trying to set the origin to the center of the group, but nothing I've tried has worked so far.

Here's the code:

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
  -webkit-animation: prop 2s infinite;
  animation: prop 2s infinite;
}

@-webkit-keyframes prop {
  0% {
    -webkit-transform: scale(1, 1);
  }
  20% {
    -webkit-transform: scale(1, .8);
  }
  40% {
    -webkit-transform: scale(1, .6);
  }
  50% {
    -webkit-transform: scale(1, .4);
  }
  60% {
    -webkit-transform: scale(1, .2);
  }
  70% {
    -webkit-transform: scale(1, .4);
  }
  80% {
    -webkit-transform: scale(1, .6);
  }
  90% {
    -webkit-transform: scale(1, .8);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes prop {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  20% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  40% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  50% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  60% {
    transform: matrix(1, 0, 0, .2, 0, 0);
  }
  70% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  80% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  90% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">
    <g id="test">
        <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
    </g>
</svg>

Answer 1

I was attempting to rotate a simple cog svg graphic around its centre point using a CSS transition. I had the same problem as you with Firefox; transform-origin seemed to have no effect.

The solution was to draw the original svg shape so that its centre was at coordinate 0, 0:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>

Then add a group around it and translate to the position you want:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
    </g>
</svg>

Now you can apply css transitions that should work in Firefox (I add a class to the HTML tag using JavaScript based on a user action (js-rotateObject) and use Minimizr to check that the browser can handle transforms and transitions (.csstransforms.csstransitions):

#myObject{
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject{
    transform: rotate(360deg);
}

Hope that helps.

Answer 2

As of Firefox 55 (released August 8, 2017), the "transform-box" CSS property is now supported. Setting it to "fill-box" will mimic that of Chrome with respect to transform-origin in SVG trees.

transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;

Update 2017-9-14

You can select the elements that you need within the SVG structure or, as Tom points out in the comments, you can simply apply it to all decendants of the SVG element (as long as the styling does not interfere with anything else you are attempting to achieve):

svg .my-transformed-element {
    transform-origin: center; /* or transform-origin: 50% */
    transform-box: fill-box;
}

or

svg * {
    transform-origin: center; /* or transform-origin: 50% */
    transform-box: fill-box;
}

Answer 3

@PatrickGrey's answer worked perfectly for me, but I needed to handle a much more complex SVG with several paths. I was able to accomplish this fix using Inkscape, but it was a multi-step process. I recommend doing this with the Inkscape XML Editor open so you can watch what's happening.

1. Select the elements you want to transform and choose Object > Group to make a new group. Drag this group so that it is centered over the top left corner of the document. This applies a transform="translate(…, …)" attribute to the group.

2. Choose Object > Ungroup from the menu. This will "flatten" the transform attribute, applying any coordinate transformations to the elements in the group.

3. The original elements should still be selected. Choose Object > Group to put them back into a group. If you are using CSS to transform the elements, add your ID or class attribute to this group (The XML editor comes in handy for this bit, or you can modify the group's ID by right-clicking it and choosing Object Properties. Classes will need to be added through the XML editor or later in your text editor.).

4. With the group selected, choose Object > Group again. This creates a new group around the original group.

5. Drag this new group to the correct location in the document. If you inspect the DOM using the XML editor, you'll see the transform="translate(…, …)" is added to the outer group.

6. Any CSS transforms can now be applied to the inner group, and they will be handled consistently by Chrome and Firefox.

Thanks to @PatrickGrey.co.uk for the initial insight. The trickiest part was figuring out how to apply the initial transform to the complex object's coordinates without resorting to hair pulling and extensive maths. The "Group, move, Ungroup" trick was documented a few places on StackOverflow, but I'd forgotten it until today. Hopefully these steps can save someone else a fair amount of grief.

Answer 4

According to the comments in this bug report, Firefox's default value for transform-box is different than Chrome's. As of Firefox 55, this property can now be set without setting a flag.

This fixed the issue for me:

transform-box: fill-box;
transform-origin: center center;

Answer 5

If you can use a fixed pixel value, use that instead to make it work.

-moz-transform-origin: 25px 25px;
-ms-transform-origin:  25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin:  25px 25px;
transform-origin: 25px 25px;

Some browsers still don't support transform-origin with percentage values the way they should – at least not in all situations. If you don't have a fixed px value calculate one per javascript and use the library of your choice (like jQuery,Greensock,etc) to set the value.

Answer 6

FWIW, I was able to solve my problem with Greensock, using TweenMax to animate individual paths inside, and this worked in Firefox Gecko, and Webkit browsers (Safari/Chrome) It does a better job of calculating the origin (not exactly sure how, but it worked for me)

Had an SVG with two gears I wanted to rotate inside another shape. So I gave each gear a unique id (id="gear1", id="gear2") and then rotated them with Greensock, something like this:

TweenMax.to("#gear1", 3.2, { 
  repeat: -1, //repeat infintely 
  ease: Linear.easeNone,  //no easing, linear motion 
  rotation:360,  //amount to rotate (full) 
  transformOrigin:"center"  //transform origin that WORKS :) 
});

Same for #gear2 with slightly different timing, and works great across browsers.

Answer 7

Is missing the -moz-transform-origin from your css code.

#test{
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    ...
}

Answer 8

As an addition, you might consider disabling the animation for Firefox versions which don't support transform-box: fill-box

Like this:

@supports (-moz-transform: rotate(0deg)) and (not (transform-box: fill-box)) {
    #test {
        animation: none;
    }
}

The first statement is just to check if you're on firefox, since you don't want to disable it on other browsers anyway. The second statement checks if the transform-box-property is supported by the browser. I used this in a current project and it works like a charm.