我有一个 SVG 图像,其中有一些我想围绕它们自己的中心(圆心)旋转的圆圈。但是,当我设置 transform-origin:center
,然后应用变换时,它开始围绕整个 SVG 图像的中心旋转。有没有什么方法可以设置变换原点,使圆围绕自己的中心旋转?
这是原始的 svg 图像(我不能在这里粘贴原始代码,所以这样):SVG image
这里有一个 jsfiddle:https://jsfiddle.net/g9zfcdm3/3/
图像中有 4 个圆圈。用任何一个圈子实现这一目标就足够了。我真正想要实现的是为这些圆圈设置动画,使它们围绕自己的中心无限旋转。
最佳答案
在 Firefox 中查看此(已解决为无效)错误报告,了解您的问题:https://bugzilla.mozilla.org/show_bug.cgi?id=1209061
通常,SVG 元素上的 CSS 变换是相对于视口(viewport)而不是元素本身。这可以通过添加 transform-box: fill-box
来改变:
svg .rotate {
animation: rotate 5s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
工作 fiddle :https://jsfiddle.net/g9zfcdm3/10/
背景
来自MDN docs about transform-box
:
The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
border-box (default)
The border box is used as the reference box. The reference box of a is the border box of its table wrapper box, not its table box.
fill-box
The object bounding box is used as the reference box.
请注意,这是一项实验性功能,可能无法在 IE 和 Edge 中使用。
关于html - 围绕其中心旋转 svg 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49336572/