Why Doesn\'t `transform-origin` Work on SVG Groups in Firefox?

The transform-origin setting on the SVG group in Firefox does not work

Cannot get transform-origin to take effect in Firefox (v.18 , not tested on other versions) is a common problem. WebKit browsers work as expected. You've tried setting the origin to be the center of the group, but all attempts so far have failed.

Here is the relevant 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></g></svg>

Solution

The problem is due to the way SVG shapes are drawn. In order for Firefox to apply transform-origin correctly, the center of the original SVG shape must be at coordinates 0, 0.

1. 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></rect></svg>

2. Add a group around the original shape and translate it to the desired position:

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

Now you can apply a CSS transition on the group and this should work fine in Firefox.

The above is the detailed content of Why Doesn\'t `transform-origin` Work on SVG Groups in Firefox?. For more information, please follow other related articles on the PHP Chinese website!