如何解决SVG 圆在旋转时弹跳
如果仔细观察,您可以看到以下代码片段中的圆圈上下弹跳:
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>
放大效果更明显,高度设置为奇数像素效果更差。它为什么这样做?我怎样才能防止它发生?
解决方法
我也没有看到任何弹跳。但是,如果您只是旋转圆圈,而不是整个 <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>
- 在 @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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。