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