Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using the <set> tag in SVG to change the rotation of a shape

I am trying to set the rotated angle of a shape using the <set> tag but for the life of me I cant figure it out. What is the right syntax?

<set id="smallGearJump" 
         attributeName="transform" attributeType="XML" type="rotate" 
         to="110 100 100" begin="1s" dur="1.7s" />

Edit: Clarification - I am trying to set it to a specific angle for a set time, not animate it there. I want it to jump from 0 rotation to 110 (in this example above)

like image 347
Doug Miller Avatar asked Mar 25 '12 12:03

Doug Miller


People also ask

How do I rotate a shape in SVG?

Rotate. The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotation is about the point (x, y) .

Can I use transform scale on SVG?

Just like HTML elements, SVG elements can be manipulated using transform functions. However, a lot of things don't work the same way on SVG elements as they do on HTML elements.


2 Answers

You need the animateTransform element not animate. You may want to modify the additive and fill properties depending on your needs.

<animateTransform id="smallGearJump"
                attributeName="transform" attributeType="XML"
                type="rotate" to="110 100 100" dur="1.7s" begin="1s"
                additive="replace" fill="freeze" />

See the docu at W3C or at MDN.

like image 127
Sirko Avatar answered Nov 15 '22 23:11

Sirko


If you want an animation to jump from one state to another then specify calcMode="discrete". Like this for instance:

<animateTransform attributeName="transform" type="rotate" to="110 100 100" dur="1.7s" begin="1s"
            calcMode="discrete" />      
like image 36
Robert Longson Avatar answered Nov 15 '22 22:11

Robert Longson