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的最外圈以圆周运动旋转，通过停留在当前位置，现在发生的是，外圈不会停留在当前位置，但是rater旋转离开。的 FIDDLE HERE

如果我将上述动画应用于div元素，那么它的效果非常好， SEE HERE 。

那么为什么动画不能在SVG上运行？如果有人能解释为什么它不起作用并且给我一个解决这个问题的解决方案，那将是很好的。

Answer 1

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

＆＃13;

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

＆＃13;

<?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>

＆＃13;

工作原理

我们变换多边形，使其中心位于原点（0,0）。然后我们将多边形包装在一个group元素中，并将rotation元素应用于该元素。这给了我们一个旋转（0,0）的齿轮。最后，我们将该组包装在另一个组中，该组将cog转换回它的原始位置。

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

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

Answer 2

我的回答是晚了几年。我认为他们在几年的时间里解决了这个问题

我用此代码修复了

.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;
  transform-box: fill-box;
  transform-origin: center center;
}

Answer 3

将此添加到.keepRotatingOne：

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;

jsfiddle

2D变换可以改变元素的x轴和y轴。 - w3s

圆形动画不适用于SVG

3 个答案: