Question

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

以下是原始的svg图片（我无法在此粘贴原始代码，所以这样）：SVG image

这是一个jsfiddle：https://jsfiddle.net/g9zfcdm3/3/

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

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 docs about transform-box：

变换框CSS属性定义变换和变换原点属性相关的布局框。

border-box （默认）

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

<强>填充框

对象边界框用作参考框。

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

Answer 2

不使用CSS直接在SVG文件中的动画示例

<?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/

围绕他们的中心旋转svg元素

2 个答案:

背景