为什么这个旋转器的 CSS 旋转变换会上下摆动？

如何解决为什么这个旋转器的 CSS 旋转变换会上下摆动？

我在 Figma 中创建了一个简单的 Spinner 图标。它应该在封闭框架的 x、y 中心对齐，即 64x64。我在这里使用 CSS 添加了一个旋转：

let rotation = 0;

function incrementAnimationFrame() {
  rotation = (6 + rotation) % 360;
  $('#rotationBlock').css('transform',`rotate(${rotation}deg)`);

  requestAnimationFrame(incrementAnimationFrame);
}

requestAnimationFrame(incrementAnimationFrame);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotationBlock" style="display: block; width: 160px; padding: 0px; margin: 0px;">
  <svg preserveAspectRatio="xMidYMid meet" fill="#FFD041" height="160px" viewBox="0 0 64 64">
    <path d="M35.6561 2.22362C43.2296 3.15353 50.1642 6.9344 55.0485 12.7967C59.9328 18.659 62.3997 26.1622 61.9472 33.7792C61.4947 41.3962 58.1567 48.5545 52.6126 53.7972C47.0686 59.04 39.7351 61.9732 32.1047 61.9998C24.4744 62.0265 17.1206 59.1445 11.5401 53.9406C5.95953 48.7367 2.57166 41.6019 2.06596 33.9882C1.56025 26.3746 3.97473 18.8544 8.81798 12.9581C13.6612 7.06183 20.5692 3.23264 28.1361 2.24987L28.9859 8.79255C23.0831 9.55919 17.6943 12.5463 13.9162 17.1458C10.1381 21.7454 8.25459 27.6118 8.64908 33.551C9.04357 39.4902 11.6864 45.0559 16.0396 49.1154C20.3929 53.1749 26.1294 55.423 32.0817 55.4022C38.034 55.3814 43.7547 53.0933 48.0795 49.0036C52.4043 44.9138 55.0082 39.3298 55.3612 33.3879C55.7142 27.4461 53.7898 21.593 49.9797 17.0199C46.1695 12.4468 40.76 9.49747 34.852 8.77207L35.6561 2.22362Z"></path>
  </svg>
</div>

https://codepen.io/jwir3/pen/dyvEQKa

如您所见，旋转略微上下摆动，我认为这与 SVG 的 viewBox 和 Spinner 中心的对齐有关。

我想知道我是否可以做些什么来减轻这种“波动”。有没有可能 Figma 没有完全对齐矢量图像的中心？

解决方法

发生这种情况是因为您的 SVG 没有 100% 适合您的 div。 div 比 SVG 高一点，你可以在浏览器中检查元素时看到它。

作为一种解决方案，我会说不要旋转 div，而是直接旋转 SVG。如果您需要旋转 div（由于多个嵌套元素），请确保元素的尺寸正确且不能太大。

顺便说一句，不需要为 div 设置 display: block，因为这是默认值。

let rotation = 0;

function incrementAnimationFrame() {
  rotation = (6 + rotation) % 360;
  $('#rotationBlock').css('transform',`rotate(${rotation}deg)`);

  requestAnimationFrame(incrementAnimationFrame);
}

requestAnimationFrame(incrementAnimationFrame);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="rotationBlock" preserveAspectRatio="xMidYMid meet" fill="#FFD041" height="160px" viewBox="0 0 64 64">
    <path d="M35.6561 2.22362C43.2296 3.15353 50.1642 6.9344 55.0485 12.7967C59.9328 18.659 62.3997 26.1622 61.9472 33.7792C61.4947 41.3962 58.1567 48.5545 52.6126 53.7972C47.0686 59.04 39.7351 61.9732 32.1047 61.9998C24.4744 62.0265 17.1206 59.1445 11.5401 53.9406C5.95953 48.7367 2.57166 41.6019 2.06596 33.9882C1.56025 26.3746 3.97473 18.8544 8.81798 12.9581C13.6612 7.06183 20.5692 3.23264 28.1361 2.24987L28.9859 8.79255C23.0831 9.55919 17.6943 12.5463 13.9162 17.1458C10.1381 21.7454 8.25459 27.6118 8.64908 33.551C9.04357 39.4902 11.6864 45.0559 16.0396 49.1154C20.3929 53.1749 26.1294 55.423 32.0817 55.4022C38.034 55.3814 43.7547 53.0933 48.0795 49.0036C52.4043 44.9138 55.0082 39.3298 55.3612 33.3879C55.7142 27.4461 53.7898 21.593 49.9797 17.0199C46.1695 12.4468 40.76 9.49747 34.852 8.77207L35.6561 2.22362Z"></path>
  </svg>

,

用几行 CSS 简化您的代码：

.box {
  width:120px;
  height:120px;
  border-radius:50%;
  background:conic-gradient(#0000 10%,#FFD041 0); /* 10% of the border transparent */
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 0); /* 15px = border thickness */
  animation:r 1s linear infinite;
}
@keyframes r {
 to {transform:rotate(360deg)}
}

<div class="box"></div>