Revision 67307 of SVG animation with SMIL

  • Revision slug: SVG/SVG_animation_with_SMIL
  • Revision title: SVG animation with SMIL
  • Revision id: 67307
  • Created:
  • Creator: sebmozilla
  • Is current revision? No
  • Comment 47 words added

Revision Content

{{ gecko_minversion_header("2.0") }}

Note: Proper SVG documentation is coming in the (hopefully) near future. In the meantime, the examples here should get you started, and you can refer to the specification and other documents for specific syntax details.

Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for animating SVG using Synchronized Multimedia Integration Language (SMIL). SMIL allows you to animate the numeric attributes of an element (x, y, ...), their transform attributes (translation or rotation) or follow a motion path. This is done adding an SVG element like {{ SVGElement("animate") }} inside the SVG element to animate. Below are examples for the 3 different ways.

Animating Attributes of an element

asdasd

Animating the transform attributes

asdasd

Animation following a path

asdasd

Example 1: Linear motion

In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely:

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

{{ SVGLiveSample("svganimdemo1.html") }}

The animation here is handled by the {{ SVGElement("animateMotion") }} element. In this case, we're establishing a path consisting of a MoveTo command to establish the starting point for the animation, then the Horizontal-line command to move the circle 300 pixels to the right, followed by the Z command, which closes the path, establishing a loop back to the beginning. By setting the value of the repeatCount attribute to "indefinite", we indicate that the animation should loop forever, as long as the SVG image exists.

See also

Revision Source

<p>{{ gecko_minversion_header("2.0") }}</p>
<div class="note"><strong>Note:</strong> Proper SVG documentation is coming in the (hopefully) near future. In the meantime, the examples here should get you started, and you can refer to the <a href="/en/SVG/SVG_animation_with_SMIL#See_also" title="en/SVG/SVG animation with SMIL#See also">specification and other documents</a> for specific syntax details.</div>
<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for animating <a href="/en/SVG" title="en/SVG">SVG</a> using <a class=" external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL). SMIL allows you to animate the numeric attributes of an element (x, y, ...), their transform attributes (translation or rotation) or follow a motion path. This is done adding an SVG element like <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }}</span> inside the SVG element to animate. Below are examples for the 3 different ways.</p>
<h2>Animating Attributes of an element</h2>
<p>asdasd</p>
<h2>Animating the transform attributes</h2>
<p>asdasd</p>
<h2>Animation following a path</h2>
<p>asdasd</p>
<h2>Example 1: Linear motion</h2>
<p>In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely:</p>
<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"&gt;
  &lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
  &lt;circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"&gt;
    &lt;animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" /&gt;
  &lt;/circle&gt;
&lt;/svg&gt;</pre>
<p>{{ SVGLiveSample("svganimdemo1.html") }}</p>
<p>The animation here is handled by the {{ SVGElement("animateMotion") }} element. In this case, we're establishing a path consisting of a <strong>M</strong>oveTo command to establish the starting point for the animation, then the <strong>H</strong>orizontal-line command to move the circle 300 pixels to the right, followed by the <strong>Z</strong> command, which closes the path, establishing a loop back to the beginning. By setting the value of the <code>repeatCount</code> attribute to "indefinite", we indicate that the animation should loop forever, as long as the SVG image exists.</p>
<h2>See also</h2>
<ul> <li><a href="/en/SVG" title="en/SVG">SVG</a></li> <li><a class=" external" href="http://www.w3.org/TR/SVG/animate.html" title="http://www.w3.org/TR/SVG/animate.html">SVG Animation Specification</a></li> <li><a class=" external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">SMIL Specification</a></li>
</ul>
Revert to this revision