Compare Revisions

SVG animation with SMIL

Revision 67312:

Revision 67312 by yyss on

Revision 67313:

Revision 67313 by Nilam on

Title:
SVG animation with SMIL
SVG animation with SMIL
Slug:
SVG/SVG_animation_with_SMIL
SVG/SVG_animation_with_SMIL
Tags:
SVG, "SVG Animation", animation, "Firefox 4", "Gecko 2.0"
SVG, "SVG Animation", animation, "Firefox 4", "Gecko 2.0"
Content:

Revision 67312
Revision 67313
n14      Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for n14      Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for 
>animating <a href="/en/SVG" title="en/SVG">SVG</a> using <a class>animating <a href="/en/SVG" title="en/SVG">SVG</a> using <a class
>=" external" href="http://www.w3.org/TR/REC-smil" title="http://w>="external" href="http://www.w3.org/TR/REC-smil" title="http://ww
>ww.w3.org/TR/REC-smil">Synchronized Multimedia Integration Langua>w.w3.org/TR/REC-smil">Synchronized Multimedia Integration Languag
>ge</a> (SMIL). SMIL allows you to:>e</a> (SMIL). SMIL allows you to:
n84      <span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("n84      <span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("
>animateTransform") }} element let you animate <strong>transform</>animateTransform") }} element let you animate <strong>transform</
>strong> attributes. This new element is necessary because we are >strong> attributes. This new element is necessary because we are 
>not animating a simple attribute like <strong>x</strong> which is>not animating a simple attribute like <strong>x</strong> which is
> just a number. Rotation attributes look like this: <code>rotatio> just a number. Rotation attributes look like this: <code>rotatio
>n(30 60 100)</code>. In the example below, we animate the center >n(theta, x, y), where theta is the angle in degrees, and x and y 
>of the rotation and the angle.<br></span>>are absolute positions</code>. In the example below, we animate t
 >he center of the rotation and the angle.<br></span>
nn102            &lt;!-- Rotate from 0 to 360 degrees, and move from 6
 >0 to 100 in the x direction. --&gt;
nn105            &lt;!-- Keep doing this until the drawing no longer e
 >xists. --&gt;
n179        <a class=" external" href="http://www.w3.org/TR/SVG/animan181        <a class="external" href="http://www.w3.org/TR/SVG/animat
>te.html" title="http://www.w3.org/TR/SVG/animate.html">SVG&nbsp;A>e.html" title="http://www.w3.org/TR/SVG/animate.html">SVG&nbsp;An
>nimation Specification</a>>imation Specification</a>
t182        <a class=" external" href="http://www.w3.org/TR/REC-smil"t184        <a class="external" href="http://www.w3.org/TR/REC-smil" 
> title="http://www.w3.org/TR/REC-smil">SMIL&nbsp;Specification</a>title="http://www.w3.org/TR/REC-smil">SMIL&nbsp;Specification</a>
>> 

Back to History