SVG rotation anchorpoint

Question

I'm new to this SVG subject but wanted some help. I need to animate a balloon that wobbles from side to side with some rotation - like a balloon floating up with a tail. I have started with the balloon part but on the rotation its seems to be anchored to the top left! any way around this - search everywhere..

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

Hope you can help.

Answer 1

Use the from and to attributes.

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

The first column is the degrees of rotation the second the third column are the pivot or anchorpoint to rotate around. so you will modify both of the 60 and 70 values to your pivot point. The X Y values start at the upper left hand corner.

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