将SVG元素绕其中心旋转

Question

我有一张SVG图片，其中有几个单独的圆，我想围绕它们自己的中心（即圆的中心）旋转。然而，当我设置transform-origin:center, 然后应用变换时，它开始围绕整个SVG图像的中心旋转。是否有任何方法可以设置变换起点，使圆围绕自己的中心旋转?

这是原始SVG图片（我无法在此处粘贴原始代码，因此请参见下面链接）: SVG image

以下是jsfiddle示例：https://jsfiddle.net/g9zfcdm3/3/

图片中有4个圆。只要能够实现其中一个圆就足够了。我实际想要实现的是对这些圆进行动画处理，使其无限制地围绕自己的中心旋转。

- Yuki.kuroshita

---

我将这个问题打包到了一个jsfiddle中，以便演示问题并让开发人员进行尝试和寻找解决方案：https://jsfiddle.net/g9zfcdm3/3/ - Felix Edelmann

非常感谢。我会将此发布在问题本身中。 - Yuki.kuroshita

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-box CSS属性定义了变换和变换原点相关的布局盒子。

border-box（默认）

边框盒子被用作参考盒子。 <table>元素的参考盒子是其表格包装盒的边框盒子，而不是它的表格盒子。

fill-box

对象边界盒子被用作参考盒子。

请注意，这是一个实验性功能，并且可能无法在IE和Edge中正常工作。

- Felix Edelmann

---

谢谢。我不太关心IE或Edge用户。但是有没有办法在这些浏览器中实现这个功能？ - Yuki.kuroshita

我认为不是这样的，因为它们根本不支持SVG中的transform-origin：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#Browser_compatibility - Felix Edelmann

Answer 2

在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" />

参考资料： https://css-tricks.com/guide-svg-animations-smil/

- Phat Tran