Question

这似乎是我的SVG图像的Inkscape SVG输出的问题。变换矩阵似乎导致圆的轻微摆动。由于我不是，也不会在数学上倾向于我，我很难理解如何纠正它，所以它不会摇晃。

我尝试过CSS3动画以及SVG animateTransform。两者都是一样的。我可以通过编辑变换矩阵来改变摆动，但它只会变得更糟。

为了简洁，我在这里只使用了webkit专有的css。

我在这里创造了一个小提琴： http://jsfiddle.net/slwfleming/KGZns/

<div class="box">
  <div class="rotateme">
    <svg class="refresh-status1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" viewBox="0 0 18 18">
      <g transform="translate(0,1.5)">
        <g transform="matrix(3.239515,0,0,3.239515,-78.803548,-173.89306)">
          <path d="m 28.973,54.655 -0.419,0.008 c 0.63,0.787 0.589,1.937 -0.14,2.667 -0.633,0.633 -1.583,0.746 -2.338,0.356 l -0.422,0.13 0.04,0.421 c 1.02,0.571 2.328,0.435 3.195,-0.433 0.968,-0.968 1.028,-2.489 0.2,-3.539 l -0.116,0.39 z"></path>
          <path d="m 25.437,57.162 c -0.63,-0.787 -0.59,-1.937 0.141,-2.667 0.633,-0.633 1.583,-0.746 2.337,-0.355 l 0.422,-0.13 -0.039,-0.421 c -1.02,-0.572 -2.328,-0.435 -3.194,0.432 -0.97,0.97 -1.029,2.49 -0.201,3.54 l 0.115,-0.39 0.419,-0.009 z"></path>
       </g>
     </g>
   </svg>
  </div>
</div>


.box {
  border:1px solid #c00;
  width:2rem;
  height:2rem;
  position:relative;
}

@-webkit-keyframes rotateRefresh {
  0% {
    -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

.rotateme {
  width:35px;
  height:35px;
  -webkit-animation:rotateRefresh 4s linear infinite;
  position:absolute;
  top:0;
  left:0;
}

.refresh-status1 {
  width:35px;
  height:35px;
}

Answer 1

您的SVG不在其viewBox中居中。如果你提取它并添加一个对比鲜明的背景，你可以看到这个。

Demo here

Inkscape没有添加viewBox属性，所以我猜你是自己做的？

如果你调整viewBox的宽度和高度，使其正确（图表周围紧密贴合），它就不应该摇晃。改变＆＃34; 18＆＃34;至＆＃34; 17.3＆＃34;似乎工作。

viewBox="0 0 17.3 17.3"

See corrected version here

它在viewBox中也没有很好地居中（它向下和向左略微偏移），但是在最终动画中这个微小的错误并不是真的可见。

SVG旋转动画循环圈摇摆不定

1 个答案: