SVG animation with SMIL

  • Revision slug: SVG/SVG_animation_with_SMIL
  • Revision title: SVG animation with SMIL
  • Revision id: 67303
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment add live sample; 6 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).

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>
<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