围绕其中心旋转svg元素

Question

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

这是原始的svg图像（我不能在此处粘贴原始代码）：SVG图像

这是为此的jsfiddle：https ://jsfiddle.net/g9zfcdm3/3/

图像中有4个圆圈。只要有一个小组就能做到这一点就足够了。我真正想要实现的是对这些圆进行动画处理，以使它们围绕自己的中心无限地旋转。

Answer 1

在Firefox中查看有关此问题的错误报告（已解决为无效）：https : //bugzilla.mozilla.org/show_bug.cgi?id=1209061

通常，SVG元素上的CSS变换是相对于视口而不是元素本身。可以通过添加来更改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); }
}

工作提琴：https : //jsfiddle.net/g9zfcdm3/10/

背景

来自MDN文档关于transform-box：

transform-b​​ox CSS属性定义了与transform和transform-origin属性相关的布局框。

边框（默认）

边框用作参考框。a的引用框是其表包装器框的边框，而不是其表框。

填充盒

对象边界框用作参考框。

请注意，这是一项实验性功能，可能无法在IE和Edge中使用。