Interactive SVG-SMIL animation tutorial

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Draft

1 Introduction

This short tutorial will provide an introduction to adding some interactivity to dynamic SVG, ie. SVG-SMIL animation.

For the moment, this page only includes some examples (tested on Jan 2014 with Firefox and Chrome)

Prerequisites:

See also:

  • SVG (Short overview)
  • SVG links (links to various SVG resources)


Alternative reading:

Attention: You must use a recent HTML5 compliant browser (issued 2011 or later), e.g. FireFox, Chrome, Opera or Safari. These examples will not work with Internet Explorer 9.

2 Simple click and mouse-over examples

SVG-SMIL allows to use user events such as a mouse click. Something like Button.click allows to refer to a click event on an SVG element that has id=Button

The following SVG code fragment is part of an HTML5 file:

 <svg style="margin-left:50px;border:1px solid blue" height="300" width="300" 
	 xmlns:xlink="http://www.w3.org/1999/xlink"
	 xmlns="http://www.w3.org/2000/svg">
  
      <g id="Button"
	 transform="translate(100,100)">
	<ellipse stroke-width="2" stroke="none" fill="yellow" ry="1cm" rx="2cm" >
	  <animate fill="freeze" dur="1s" begin="Button.click" from="1cm" to="5cm" attributeName="ry"/>
	  <animate fill="freeze" dur="1s" begin="Button.click" from="2cm" to="10cm" attributeName="rx"/>
	</ellipse>
	<text style="font-family:Arial;font-size:18;" alignment-baseline="middle" x="-1cm">Click me !</text>
      </g>      
    </svg>

Live example / source code:

Mouse over/out example

<?xml version="1.0" ?>
<svg height="200" width="500" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg">
  
  <ellipse stroke-width="2" stroke="black" fill="yellow" 
	   cx="3cm" cy="2cm" ry="1cm" rx="2cm">
    <animate fill="freeze" dur="0.1s" to="blue" from="yellow" 
		  attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="yellow" from="blue"
		  attributeName="fill" begin="mouseout"/>
  </ellipse>
</svg>

Live example / source code:

3 Combined click/mouse over

Live example showing a mouse over affecting an other element plus an external link

4 Motion animation

Example showing how to start a motion animation:


Alternative examples:

5 Stopping / pausing animation

Pendulum example

<?xml version="1.0" ?>

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
     onload="init()"
     viewBox="0 0 300 200">
<desc>
  The pendulum code was taken from http://www.treebuilder.de/xul/svg2apng/pendel.svg. The pauseAnimations method is documented in the SVG 1.1 spec: http://www.w3.org/TR/SVG/struct.html#__svg__SVGSVGElement__pauseAnimations
 </desc>
<g>
<line x1="100" y1="0" x2="100" y2="90" stroke="black"/>
<circle cx="100" cy="90" r="10"/>
<animateTransform attributeName="transform" type="rotate" values="0,100,0;70,100,0;0,100,0;-70,100,0;0,100,0"
		  keySplines="0,0.5,0.5,1;0.5,0,1,0.5;0,0.5,0.5,1;0.5,0,1,0.5"
		  calcMode="spline" begin="0s" dur="4s" repeatCount="indefinite"/>
</g>

<g onclick="document.documentElement.pauseAnimations();" transform="translate(150 0)">
  <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
  <text id="t" style="font:16px Arial Black;fill:white;stroke:black" transform="translate(5 20)">STOP</text>
</g>

<g onclick="document.documentElement.unpauseAnimations();" transform="translate(5 0)">
  <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
  <text id="t2" style="font:16px Arial Black;fill:white;stroke:black" transform="translate(2 20)">START</text>
</g>

</svg>