html - 圆形动画不适用于 SVG

Question

我将以下动画应用于我的简单 SVG:

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

基本上，我需要 SVG 的最外环以圆周运动旋转，通过停留在当前位置，现在发生的情况是，外环没有停留在当前位置，而是旋转离开。 <强> FIDDLE HERE

如果我将上面的动画应用到 div 元素，它工作得很好， SEE HERE 。

那么为什么动画在 SVG 上不起作用？如果有人能解释为什么它不起作用并给我一个解决方案来规避这个问题，那就太好了。

Answer 1

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

@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) 上。然后我们将多边形包裹在一个组元素中，并对其应用旋转元素。这给了我们一个围绕 (0,0) 旋转的齿轮。最后，我们将该组包装在另一个组中，将齿轮转换回其原始位置。

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

这里我们需要两个额外的组，因为我们正在旋转的对象不能有自己的变换。因为它会被CSS中的替换，破坏了效果。