SVG 旋转锚点

Question

我是这个SVG主题的新手，但需要一些帮助。我需要制作一个气球的动画，它随着一些旋转而左右摇摆 - 就像一个漂浮着尾巴的气球。我从气球部分开始，但在旋转时它似乎锚定在左上角！任何解决方法 - 到处搜索..

<svg class="balloon"
viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg">

<path fill="#1D1D1B" d="M95.8,52.2c0-26.5-21.5-47.9-47.9-47.9S0,25.8,0,52.2c0,25.3,19.6,51,44.5,52.8c-0.9,1.6-2,3.3-3.1,4.6
c2.3,0.7,3.7-1,5.3,0c1.7,1,0.9-2,5.4,0.3c1.7,0.9,0.1-1.9-1.4-4.9C75.9,103.6,95.8,77.8,95.8,52.2z M16.3,31.4
c-1.6-1.6-0.5-5.1,2.3-8s6.4-3.9,8-2.3c1.6,1.6,0.5,5.1-2.3,8S17.8,33,16.3,31.4z M34.9,65.1c-7.2,0-13-5.1-13-12.9
c0-7.8,5.8-12.8,13-12.8c4.8,0,8,2.3,10,5.2l-3.6,2c-1.3-1.9-3.6-3.3-6.4-3.3c-4.9,0-8.6,3.8-8.6,9s3.6,9,8.6,9
c2.5,0,4.8-1.2,5.9-2.2v-3.9h-7.4v-3.8h11.8v9.3C42.7,63.3,39.2,65.1,34.9,65.1z M61.3,65.1c-7.4,0-12.7-5.4-12.7-12.8
c0-7.4,5.3-12.8,12.7-12.8c7.4,0,12.7,5.4,12.7,12.8C74,59.6,68.7,65.1,61.3,65.1z"/>
 <animateTransform 
                attributeType="xml"
                attributeName="transform"
                type="rotate"
                values="0;20;0" dur="3s"
                dur="4s"
                repeatCount="indefinite"/>

希望你能帮到忙。

Answer 1

使用 from 和 to 属性。

from="0 60 70" 
to="360 60 70" 

第一列是旋转度数第二列是第三列，是要旋转的枢轴或锚点。因此，您需要将 60 和 70 值修改为枢轴点。X Y 值从左上角开始。

0 1 2 3 4...
1
2
3
4
...

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

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