Difference between revisions of "Interactive SVG-SMIL animation tutorial"

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 66: Line 66:
== Stopping / pausing animation ==
== Stopping / pausing animation ==
'''Pendulum example'''
'''Exemple Pendule'''
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/pendula.svg
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/pendula.svg
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/pendula.html (HTML5 variant, Javascript code is a bit different)
<source lang="XML" enclose="div">
<source lang="XML" enclose="div">

Revision as of 19:47, 10 February 2014

<pageby nominor="false" comments="false"/>


1 Introduction

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


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" 
      <g id="Button"
	<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"/>
	<text style="font-family:Arial;font-size:18;" alignment-baseline="middle" x="-1cm">Click me !</text>

Source code:

More examples:

3 Motion animation

Example showing how to start a motion animation:

Alternative examples:

4 Stopping / pausing animation

Pendulum example

<source lang="XML" enclose="div"> <?xml version="1.0" ?>

<svg xmlns="http://www.w3.org/2000/svg" version="1.0"

    viewBox="0 0 300 200">


 function stop () {
 function start () {

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

<g> <line x1="100" y1="0" x2="100" y2="90" stroke="black"/> <circle cx="100" cy="90" r="10"/> <animateTransform attributeName="transform" type="rotate"

   calcMode="spline" begin="0s" dur="4s" repeatCount="indefinite"/>


<g onclick="stop()" transform="translate(150 0)"> <rect width="50" 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="start()" transform="translate(5 0)"> <rect width="50" height="30" rx="10" stroke="black" fill-opacity="0.2"/> <text id="t" style="font:16px Arial Black;fill:white;stroke:black" transform="translate(2 20)">START</text> </g>