旋转SVG组

时间:2018-01-24 20:41:07

标签: animation svg

我有一个下垂组。 我正在尝试旋转它们。 我正在恢复像地球这样的旋转效果:) 但我想让它在一个地方旋转。 应该采取什么样的正确方法? 谢谢!

<g>
    <g>
        <path class="st0" d="M206.5,44.6l-2.2,0c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.7-0.5-1.1l0-1.3l-0.6-0.2l-0.9,0.9
            c-0.6,0.6-1.7,0.6-2.3,0l-1.5-1.6c-0.6-0.6-0.6-1.7,0-2.3l0.9-0.9l-0.2-0.6l-1.3,0c-0.9,0-1.6-0.7-1.6-1.6l0-2.2
            c0-0.9,0.7-1.6,1.6-1.6l1.3,0l0.2-0.5l-0.9-0.9c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1l1.6-1.5c0.6-0.6,1.7-0.6,2.3,0
            l0.9,1l0.5-0.2l0-1.3c0-0.9,0.7-1.6,1.6-1.6l2.2,0c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1l0,1.3l0.5,0.2l0.9-0.9
            c0.6-0.6,1.7-0.6,2.3,0l1.5,1.6c0.3,0.3,0.5,0.7,0.5,1.1c0,0.4-0.2,0.8-0.5,1.1l-0.9,0.9l0.2,0.6l1.3,0c0.9,0,1.6,0.7,1.6,1.6
            l0,2.2c0,0.9-0.7,1.6-1.6,1.6l0,0l-1.3,0l-0.2,0.6l0.9,0.9c0.3,0.3,0.5,0.7,0.5,1.1c0,0.4-0.2,0.8-0.5,1.1l-1.6,1.5
            c-0.6,0.6-1.7,0.6-2.3,0l-0.9-1l-0.5,0.2l0,1.3C208.1,43.9,207.3,44.6,206.5,44.6z M204.7,42.6l1.4,0l0-1c0-0.8,0.5-1.5,1.3-1.7
            l0.6-0.2c0.2-0.1,0.4-0.1,0.7-0.1c0.5,0,1,0.2,1.3,0.5l0.7,0.7l1-1L211,39c-0.5-0.5-0.7-1.4-0.3-2.1l0.2-0.6
            c0.2-0.6,0.9-1.2,1.7-1.2l1,0l0-1.4l-1,0c-0.8,0-1.5-0.5-1.7-1.3l-0.2-0.6c-0.3-0.6-0.2-1.5,0.4-2l0.7-0.7l-1-1l-0.7,0.7
            c-0.5,0.5-1.5,0.7-2.1,0.3l-0.6-0.2c-0.7-0.2-1.2-1-1.2-1.7l0-1l-1.4,0l0,1c0,0.8-0.5,1.5-1.3,1.7l-0.6,0.2
            c-0.2,0.1-0.4,0.1-0.7,0.1c-0.5,0-1-0.2-1.3-0.5l-0.7-0.7l-1,1l0.7,0.7c0.5,0.6,0.7,1.4,0.3,2.1l-0.2,0.6c-0.2,0.7-1,1.2-1.7,1.2
            l-1,0l0,1.4l1,0c0.8,0,1.5,0.5,1.7,1.3l0.2,0.6c0.3,0.6,0.1,1.5-0.4,2l-0.7,0.7l1,1l0.7-0.7c0.5-0.5,1.5-0.7,2.1-0.3l0.6,0.2
            c0.7,0.2,1.2,1,1.2,1.7L204.7,42.6z M205.5,38.3c-1.1,0-2.1-0.4-2.8-1.2c-0.7-0.7-1.1-1.7-1.1-2.8c0-2.1,1.8-3.9,3.9-3.9h0
            c2.2,0,3.9,1.8,3.9,3.9C209.3,36.6,207.6,38.3,205.5,38.3z M205.5,31.5v1c-1,0-1.9,0.8-1.9,1.9c0,0.5,0.2,1,0.5,1.4
            c0.4,0.4,0.8,0.6,1.3,0.6l0,0c1.1,0,1.9-0.8,1.9-1.9c0-1.1-0.8-1.9-1.9-1.9L205.5,31.5z"/>

    <animateTransform attributeName="transform"
                          atributeType="XML"
                          type="rotate"
                          from="0"
                          to="360"
                          dur="10s"
                          repeatCount="indefinite"/>
    </g>

</g>

1 个答案:

答案 0 :(得分:1)

只需将旋转中心包含在以下两行中:

from="0"
to="360"

之类的东西(我不知道中心,只是一个猜测)

from="0 203.5 34.6"
to="360 204.6 24.3 "

&#13;
&#13;
<svg width="400" height="200" viewBox="0 0 400 200">
<g>
    <g>
        <path class="st0" d="M206.5,44.6l-2.2,0c-0.4,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.5-0.7-0.5-1.1l0-1.3l-0.6-0.2l-0.9,0.9
            c-0.6,0.6-1.7,0.6-2.3,0l-1.5-1.6c-0.6-0.6-0.6-1.7,0-2.3l0.9-0.9l-0.2-0.6l-1.3,0c-0.9,0-1.6-0.7-1.6-1.6l0-2.2
            c0-0.9,0.7-1.6,1.6-1.6l1.3,0l0.2-0.5l-0.9-0.9c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1l1.6-1.5c0.6-0.6,1.7-0.6,2.3,0
            l0.9,1l0.5-0.2l0-1.3c0-0.9,0.7-1.6,1.6-1.6l2.2,0c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1l0,1.3l0.5,0.2l0.9-0.9
            c0.6-0.6,1.7-0.6,2.3,0l1.5,1.6c0.3,0.3,0.5,0.7,0.5,1.1c0,0.4-0.2,0.8-0.5,1.1l-0.9,0.9l0.2,0.6l1.3,0c0.9,0,1.6,0.7,1.6,1.6
            l0,2.2c0,0.9-0.7,1.6-1.6,1.6l0,0l-1.3,0l-0.2,0.6l0.9,0.9c0.3,0.3,0.5,0.7,0.5,1.1c0,0.4-0.2,0.8-0.5,1.1l-1.6,1.5
            c-0.6,0.6-1.7,0.6-2.3,0l-0.9-1l-0.5,0.2l0,1.3C208.1,43.9,207.3,44.6,206.5,44.6z M204.7,42.6l1.4,0l0-1c0-0.8,0.5-1.5,1.3-1.7
            l0.6-0.2c0.2-0.1,0.4-0.1,0.7-0.1c0.5,0,1,0.2,1.3,0.5l0.7,0.7l1-1L211,39c-0.5-0.5-0.7-1.4-0.3-2.1l0.2-0.6
            c0.2-0.6,0.9-1.2,1.7-1.2l1,0l0-1.4l-1,0c-0.8,0-1.5-0.5-1.7-1.3l-0.2-0.6c-0.3-0.6-0.2-1.5,0.4-2l0.7-0.7l-1-1l-0.7,0.7
            c-0.5,0.5-1.5,0.7-2.1,0.3l-0.6-0.2c-0.7-0.2-1.2-1-1.2-1.7l0-1l-1.4,0l0,1c0,0.8-0.5,1.5-1.3,1.7l-0.6,0.2
            c-0.2,0.1-0.4,0.1-0.7,0.1c-0.5,0-1-0.2-1.3-0.5l-0.7-0.7l-1,1l0.7,0.7c0.5,0.6,0.7,1.4,0.3,2.1l-0.2,0.6c-0.2,0.7-1,1.2-1.7,1.2
            l-1,0l0,1.4l1,0c0.8,0,1.5,0.5,1.7,1.3l0.2,0.6c0.3,0.6,0.1,1.5-0.4,2l-0.7,0.7l1,1l0.7-0.7c0.5-0.5,1.5-0.7,2.1-0.3l0.6,0.2
            c0.7,0.2,1.2,1,1.2,1.7L204.7,42.6z M205.5,38.3c-1.1,0-2.1-0.4-2.8-1.2c-0.7-0.7-1.1-1.7-1.1-2.8c0-2.1,1.8-3.9,3.9-3.9h0
            c2.2,0,3.9,1.8,3.9,3.9C209.3,36.6,207.6,38.3,205.5,38.3z M205.5,31.5v1c-1,0-1.9,0.8-1.9,1.9c0,0.5,0.2,1,0.5,1.4
            c0.4,0.4,0.8,0.6,1.3,0.6l0,0c1.1,0,1.9-0.8,1.9-1.9c0-1.1-0.8-1.9-1.9-1.9L205.5,31.5z"/>

    <animateTransform attributeName="transform"
                          atributeType="XML"
                          type="rotate"
                          from="0 211 39"
                          to="360 211 39"
                          dur="2s"
                          repeatCount="indefinite"/>
    </g>

</g>
</svg>
&#13;
&#13;
&#13;