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

Question

我在 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的矢量图中心没有完全对齐？

Answer 1

发生这种情况是因为您的 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>

Answer 2

用几行 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>

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

Why is this CSS rotation transform of a spinner bobbing up and down?

css

animation

svg

rotation

css-transforms