Geek Answers Handbook

Vertical Roller SVG

I am new to this SVG issue, but I need help. I need to revive a balloon that sways from side to side with some rotation - like a balloon floating with its tail. I started with part of the ball, but on the turn it seemed to be tied to the upper left corner! in any way around it - 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.

0
source share
1 answer

Use the from and to attributes.

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

The first column is the degrees of rotation; the second third column is a pivot or reference point for turning around. so you change both 60 and 70 to your anchor point. XY values ​​start in the upper left 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"/>
0
source

More articles:


All Articles