在某些版本的Firefox中，可以通过稍微重新配置SVG来避免使用transform-origin的错误.见下文.

You can avoid the bug with transform-origin in some versions of Firefox, by reconfiguring your SVG a little. See below.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700,800);
.st0 {
  fill: none;
  stroke: #31A6DE;
  stroke-miterlimit: 10;
}

.st1 {
  fill: #31A6DE;
}

.st2 {
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
}

.st3 {
  font-size: 14px;
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

.keepRotatingOne {
  -webkit-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

<?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">

    <g transform="translate(549.9, 168)">
      <g class="keepRotatingOne">
        <polygon id="XMLID_1_" class="st0" points="537,301.5 564,301.5 569,275.8 594.7,267.5 613.3,287.1 635.7,271.7 625,247 637,233.7 
	662.7,242.3 674.3,218 653.3,200.3 657.6,184 683.5,179.3 683.5,152 656.1,147.3 652.2,131 672.6,113.3 659.3,90.7 633.3,98.3 
	619,84.3 630,64.3 607,49.7 590,68.3 568.3,62.3 563.7,34.5 537,34.5 531,62.3 506.3,69.5 488.3,49.6 465,64.7 476,89.7 465,102.3 
	438,93.7 426.3,117.7 447,135 443,152 416.3,157 417,184.3 443.7,188.8 448.5,205.8 428.2,222.7 441.7,246.3 467.5,237.8 480,250.7 
	470,274.3 492.3,287.8 510.5,269 532.5,275.5 " transform="translate(-549.9, -168)"/>
      </g>
    </g>
    <ellipse id="XMLID_3_" class="st0" cx="550.5" cy="168.5" rx="91.6" ry="89.5" />
    <text id="XMLID_4_" transform="matrix(1 0 0 1 519.3203 166.4999)">
      <tspan x="0" y="0" class="st1 st2 st3">ProCess</tspan>
      <tspan x="-36.4" y="16.8" class="st1 st2 st3">Standardization</tspan>
    </text>
  </svg>

工作方式

我们对多边形进行了变换，使其中心位于原点(0,0)上.然后，将多边形包装在一个group元素中，并将旋转元素应用于该元素.这给了我们一个围绕(0,0)旋转的齿轮.最后，我们将该组包装到另一个组中，该组将齿轮重新变回其原始位置.

We transform the polygon so that its centre sits on the origin (0,0). Then we wrap the polygon in a group element and apply the rotation element to that. That gives us a cog that is rotating around (0,0). Finally, we wrap that group in another group that transforms the cog back to it's original position.

<g transform="translate(<back to original position>)">
  <g class="applyRotationAnimationToThisElement">
    <polygon transform="translate(<to the origin>)" ... />
  </g>
</g>

我们这里需要两个额外的组，因为我们旋转的对象不能拥有自己的变换.那是因为它将被CSS中的那个替换，并破坏效果.

We need two extra groups here because the object we are rotating can't have it's own transform. That's because it will get replaced by the one in the CSS, and destroy the effect.