我有一个 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 变换与视口相关，而不是与元素本身相关。这可以通过添加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 docs about transform-box：
transform-box CSS 属性定义了与 transform 和 transform-origin 属性相关的布局框。
边框（默认）
边框框用作参考框。 a的reference box是它的table wrapper box的border box，而不是它的table box。
填充框
对象边界框用作参考框。
请注意，这是一项实验性功能，可能不适用于 IE 和 Edge。
【讨论】：
直接在 SVG 文件中不使用 CSS 的动画示例
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g id="sharp-group" transform="translate(50, 50) rotate(0) scale(0.8, 0.8)">
<g>
<g>
<path fill="#746DF7" d="M493.815,70.629c-11.001-1.003-20.73,7.102-21.733,18.102l-2.65,29.069C424.473,47.194,346.429,0,256,0
C158.719,0,72.988,55.522,30.43,138.854c-5.024,9.837-1.122,21.884,8.715,26.908c9.839,5.024,21.884,1.123,26.908-8.715
C102.07,86.523,174.397,40,256,40c74.377,0,141.499,38.731,179.953,99.408l-28.517-20.367c-8.989-6.419-21.48-4.337-27.899,4.651
c-6.419,8.989-4.337,21.479,4.651,27.899l86.475,61.761c12.674,9.035,30.155,0.764,31.541-14.459l9.711-106.53
C512.919,81.362,504.815,71.632,493.815,70.629z"/>
</g>
</g>
<g>
<g>
<path fill="#746DF7" d="M472.855,346.238c-9.838-5.023-21.884-1.122-26.908,8.715C409.93,425.477,337.603,472,256,472
c-74.377,0-141.499-38.731-179.953-99.408l28.517,20.367c8.989,6.419,21.479,4.337,27.899-4.651
c6.419-8.989,4.337-21.479-4.651-27.899l-86.475-61.761c-12.519-8.944-30.141-0.921-31.541,14.459l-9.711,106.53
c-1.003,11,7.102,20.73,18.101,21.733c11.014,1.001,20.731-7.112,21.733-18.102l2.65-29.069C87.527,464.806,165.571,512,256,512
c97.281,0,183.012-55.522,225.57-138.854C486.594,363.309,482.692,351.262,472.855,346.238z"/>
</g>
</g>
</g>
<animateTransform xlink:href="#sharp-group" attributeType="xml" attributeName="transform" type="rotate" from="0 256 256" to="360 256 256" dur="2s" additive="sum" repeatCount="indefinite" />
</svg>
您可以在
处更改动画配置 <animateTransform xlink:href="#sharp-group" attributeType="xml" attributeName="transform" type="rotate" from="0 256 256" to="360 256 256" dur="2s" additive="sum" repeatCount="indefinite" />
【讨论】：