html - 围绕其中心旋转 svg 元素

Question

我有一个 SVG 图像，其中有一些我想围绕它们自己的中心(圆心)旋转的圆圈。但是，当我设置 transform-origin:center，然后应用变换时，它开始围绕整个 SVG 图像的中心旋转。有没有什么方法可以设置变换原点，使圆围绕自己的中心旋转？

这是原始的 svg 图像(我不能在这里粘贴原始代码，所以这样):SVG image

这里有一个 jsfiddle:https://jsfiddle.net/g9zfcdm3/3/

图像中有 4 个圆圈。用任何一个圈子实现这一目标就足够了。我真正想要实现的是为这些圆圈设置动画，使它们围绕自己的中心无限旋转。

Answer 1

在 Firefox 中查看此(已解决为无效)错误报告，了解您的问题:https://bugzilla.mozilla.org/show_bug.cgi?id=1209061

通常，SVG 元素上的 CSS 变换是相对于视口(viewport)而不是元素本身。这可以通过添加 transform-b​​ox: 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 中使用。