CSS animation：为什么我的旋转圈会摇晃？

Question

我正在尝试使用 SVG 和 CSS 创建一个简单的加载 animation 但由于某种原因，旋转的圆圈略有摆动。 它几乎不引人注意，但它让我发疯。

这是演示问题的 Codepen 的链接： https://codepen.io/signorbusi/pen/dyeJqmE

这是代码：

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #spinner { animation-name: spin; margin-top: 2rem; animation-duration: 0.5s; animation-iteration-count: infinite; animation-timing-function: linear; transform-origin: center center; }

 <div class="wrapper"> <svg id="spinner" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" stroke="black"> <circle r="23" cx="24" cy="24" stroke-width="2"/> </svg> </div>

任何关于如何摆脱摇摆的指示都会非常有帮助！

Answer 1

<svg>元素的视图框在旋转时会切断圆的边缘。 （请注意，您的stroke-width会增加圆的大小，使其超出r属性中定义的半径。）

如果你扩展<svg>元素的width和height属性，相应地匹配viewbox属性，然后在其中的圆中居中（使用<circle>元素上的cx和cy属性），它不会“摆动”：

<div class="wrapper">
  <svg id="spinner" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" stroke="black">
    <circle r="23" cx="30" cy="30" stroke-width="2"/>
  </svg>
</div>

工作 Codepen 可以在这里找到： https://codepen.io/theodorewiersema/pen/NWMXowY

Answer 2

这应该有效：

<circle r="22" cx="24" cy="24" stroke-width="2"/>

我将半径属性更改为 22，它不会摆动。