时间戳

首页 > 解决方案 > 为什么微调器的这个 CSS 旋转变换会上下摆动？

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 是否有可能没有完全对齐矢量图像的中心？

标签： cssanimationsvgrotationcss-transforms

解决方案

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

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

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

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>

推荐阅读