Børges Rikskringkasting

Animate rotation attribute rotate SVG animation

onsdag 20. januar 2010

If you want to use the "rotate" attribute in SVG animations, you should be aware of what the "to" and "from" values represent.

Example:
animateTransform attributeName="transform" type="rotate" x="100" y="10" from="0,130,110" to="360,130,110" dur="5s" fill="freeze"

from="rotationangle_before,x-

coordinate_before,y-coordinate_before"
to="rotationangle_after,x-coordinate_after,y-coordinate_after"

If you want the object to rotate around its axis, you have to find the axis in your coordinate system (add half of the width to the x-coordinate, and add half of the height to the y-coordinate).

Good Luck!

Animate rotation attribute rotate SVG animation

Arkiv