SVG animation with SMIL

  • Revision slug: SVG/SVG_animation_with_SMIL
  • Revision title: SVG animation with SMIL
  • Revision id: 67304
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 42 words added

Revision Content

{{ gecko_minversion_header("2.0") }}{{ draft() }}

Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for animating SVG using Synchronized Multimedia Integration Language (SMIL).

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.

Example

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") }}

See also

Revision Source

<p>{{ gecko_minversion_header("2.0") }}{{ draft() }}</p>
<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).</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>
<h2>Example</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>
<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