SVG圆在旋转时弹跳答案

【问题标题】：SVG circle bouncing on rotationSVG圆在旋转时弹跳
【发布时间】：2021-09-12 20:27:11
【问题描述】：

如果你仔细观察，你可以在下面的代码 sn-p 中看到圆圈上下跳动：

svg {
  animation: spin 1s linear infinite;
}

img {
  animation: spin 1s linear infinite;
}

@keyframes spin {
     from {
          transform: rotate(0deg);
     }
     to {
          transform: rotate(360deg);
     }
}

<svg viewBox="0 0 1000 1000" height="15" xmlns="http://www.w3.org/2000/svg">
  <circle cx="500" cy="500" r="500"/>
</svg>

如果放大效果更明显，如果高度设置为奇数像素，效果也会更差。为什么这样做？我怎样才能防止它发生？

【问题讨论】：

即使放大也看不到弹跳。可能是您的特定浏览器/平台/显卡中的错误。
@RobertLongson 我已经设法在各种不同的浏览器和计算机上重现该问题

标签： html css svg rotation css-transforms

【解决方案1】：

我也没有看到任何弹跳。但是，如果您只旋转圆圈而不是整个<svg> 元素，也许您会更幸运。这样更好吗？

svg circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
     from {
          transform: rotate(0deg);
     }
     to {
          transform: rotate(360deg);
     }
}

<svg viewBox="0 0 1000 1000" height="15" xmlns="http://www.w3.org/2000/svg">
  <circle cx="500" cy="500" r="500"/>
</svg>

【讨论】：

感谢您的回答，但不幸的是，圆圈似乎仍在偏离中心旋转。
那么您将需要更详细地更新您的问题。您使用的是什么操作系统和浏览器版本？你的电脑、显卡等有什么特别之处吗？没有其他人报告说在您的示例中看到了同样的情况。

【解决方案2】：

在 @Paul LeBeau 的回答中添加了双色渐变以显示圆的旋转
添加了一个框架，您可以通过该框架看到圆圈在旋转过程中没有跳动

svg circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  fill:url(#Lg);
  animation: spin 1s linear infinite;
}

@keyframes spin {
     from {
          transform: rotate(0deg);
     }
     to {
          transform: rotate(360deg);
     }
}

<svg viewBox="0 0 1000 1000" height="30" xmlns="http://www.w3.org/2000/svg" style="border:1px solid" >
   <defs>
     <linearGradient id="Lg" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="50%" stop-color="black" />
        <stop offset="50%" stop-color="red" />
       
      </linearGradient> 
   </defs>
  <circle cx="500" cy="500" r="500"/>
</svg>

【讨论】：