圆形动画在SVG上不起作用 [英] Circular animation not working on SVG

问题描述

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

I have the following animation applied to my simple 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的最外圈以圆周运动旋转，方法是将其保持在当前位置，而现在发生的情况是，外圈没有保持在其当前位置，而是分度器旋转了. 在此处填充

Basically i need the outer most ring of my SVG to rotate in a circular motion , by staying in its current place ,whats happening right now is that, the outer ring is not staying in its current place, but rater rotating away. FIDDLE HERE

但是，如果我将上述动画应用于div元素，则效果很好， 在这里 .

If i apply the above animation to a to a div element however, it works perfectly fine, SEE HERE.

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

So why is the animation not working on the SVG ? It would be nice if somebody could explain why its not working and also give me a solution to circumvent this problem.

推荐答案

在某些版本的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.

这篇关于圆形动画在SVG上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！