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" 

的第一列是度的旋转 第二第三列的是枢转或anchorpoint到绕。所以你将修改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"/>