Why Doesn\'t Setting the Transform Origin for an SVG Group Work in Firefox?

Setting transform origin for SVG group in Firefox does not work

Encountered a problem using transform-origin in Firefox (version 18, others version not tested). WebKit browsers work as expected. I've tried setting the origin to the center of the group, but nothing I've tried so far has worked.

Here is 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>

Solution

I am trying to rotate a simple gear around its center point using CSS transforms svg graphics. I'm having the same problem as you in Firefox; transform-origin doesn't seem to have any effect.

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

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect>

Then add a group around it and pan to where you want it:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect>

Now you can apply CSS transforms which should work in Firefox Works (I use JavaScript to add HTML tags based on user actions Remember to add a class (js-rotateObject) and use Minimizr to check if the browser can handle transforms and transformations (.csstransforms.csstransitions):

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

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

Hope that helps.

The above is the detailed content of Why Doesn\'t Setting the Transform Origin for an SVG Group Work in Firefox?. For more information, please follow other related articles on the PHP Chinese website!