Setting transform-origin on SVG group not working in Firefox

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>

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.

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;
}

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

@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.

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.
Choose Object > Ungroup from the menu. This will "flatten" the transform attribute, applying any coordinate transformations to the elements in the group.
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.).
With the group selected, choose Object > Group again. This creates a new group around the original group.
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.
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.

Setting transform-origin on SVG group not working in Firefox

Related

Recent Posts