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

SVG旋转锚点

1 个答案: