Question

我查看了与我的查询相关的现有问题但无法获得帮助。

我正在使用css3的基本动画。下面是小提琴..

https://jsfiddle.net/gamerVinod/d21c6bcb/5/

以下是css

@keyframes rotate {
    from {
       transform: rotate(0deg);
       transform-origin: center;
    }
    to {
        transform: rotate(359deg);
        transform-origin: center;
    }
}

.rotate-element {
    animation: rotate 1s infinite linear;
}

每当我使用SVG并旋转它然后它会稍微反弹。

我无法确定是由于SVG路径还是其他原因。有人请告诉我它的原因以及如何解决它？

Answer 1

正如@Ouroborus所说，贝塞尔曲线只能近似圆弧。如果你需要旋转这些形状，除非你的形状经过仔细精确的制作，否则你可能会看到一些摆动。

您可以使用arc（A）路径元素。但你不需要。到目前为止，最简单的解决方案是使用实际的<circle>。

＆＃13;

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.rotate-element {
    animation: rotate 1s infinite linear;
}

.parent{
  height: 200px;
  width: 200px;
  background: red;
  display: flex;
  align-items:center;
  text-align: center;
}

.child{
  height: 200px;
  width: 200px;
}

＆＃13;

<div class="parent">
 <svg class="child rotate-element" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
    <circle cx="20" cy="20" r="13.25" opacity="0.2" fill="none"
            stroke="#000" stroke-width="3"/> 
    <circle cx="20" cy="20" r="13.25" fill="none"
            stroke="#000" stroke-width="3"
            stroke-dasharray="6 80"/> 
  </svg>
</div>

＆＃13;

这里我使用了两个粗线条（线条）和透明填充的圆圈。后面的那个是半透明的（就像原始的SVG一样）。顶部的那个只有一部分使用破折号阵列绘制的笔划。

旋转的svg元素看起来像是略微弹跳

1 个答案: