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

The educational technology and digital learning wiki
Jump to navigation Jump to search
(Created page with "<pageby nominor="false" comments="false"/> {{web technology tutorial|Intermediate}} {{stub}} == Introduction == This short tutorial will provide an introduction to adding so...")
 
m (Text replacement - "<pageby nominor="false" comments="false"/>" to "<!-- <pageby nominor="false" comments="false"/> -->")
 
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<pageby nominor="false" comments="false"/>
+
<!-- <pageby nominor="false" comments="false"/> -->
 
{{web technology tutorial|Intermediate}}
 
{{web technology tutorial|Intermediate}}
 
{{stub}}
 
{{stub}}
Line 5: Line 5:
 
== Introduction ==
 
== Introduction ==
  
−
This short tutorial will provide an introduction to adding some interactivity to dynamic SVG, ie. [[SVG-SMIL animation tutorial|SVG-SMIL animation]]
+
This short tutorial will provide an introduction to adding some interactivity to dynamic SVG, ie. [[SVG-SMIL animation tutorial|SVG-SMIL animation]].
 +
 
 +
For the moment, this '''page only includes some examples''' (tested on Jan 2014 with Firefox and Chrome)
  
 
Prerequisites:
 
Prerequisites:
Line 24: Line 26:
 
== Simple click and mouse-over examples ==
 
== Simple click and mouse-over examples ==
  
−
* http://tecfa.unige.ch/guides/svg/ex/mouse-over/
+
SVG-SMIL allows to use user events such as a mouse click.
 +
Something like <code>Button.click</code> allows to refer to a click event on an SVG element that has <code>id=Button</code>
 +
 
 +
The following SVG code fragment is part of an HTML5 file:
 +
 
 +
<source lang="XML" enclose="div">
 +
<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>
 +
</source>
 +
 
 +
Live example / source code:
 +
* http://tecfa.unige.ch/guides/svg/ex/mouse-over/simple-click.html
 +
* http://tecfa.unige.ch/guides/svg/ex/mouse-over/simple-click2.html (Animation elements outside the animated element)
 +
* http://tecfa.unige.ch/guides/svg/ex/mouse-over/simple-click3.html (Animation happens in another element)
 +
 
 +
'''Mouse over/out example'''
 +
 
 +
<source lang="XML" enclose="div">
 +
<?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>
 +
</source>
 +
 
 +
Live example / source code:
 +
* http://tecfa.unige.ch/guides/svg/ex/mouse-over/mouse-over.svg
 +
 
 +
== Combined click/mouse over ==
 +
 
 +
Live example showing a mouse over affecting an other element plus an external link
 +
* http://tecfa.unige.ch/guides/svg/ex/mouse-over/mouse-over1.svg
  
 
== Motion animation ==
 
== Motion animation ==
  
−
Example:
+
Example showing how to start a motion animation:
−
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/drive-start.svg
+
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/drive-start.svg (Pure SVG)
−
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/drive-start.html
+
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/drive-start.html (HTML5 + SVG)
  
  
 
Alternative examples:
 
Alternative examples:
 
* http://srufaculty.sru.edu/david.dailey/svg/newstuff/SMIL7g.svg
 
* http://srufaculty.sru.edu/david.dailey/svg/newstuff/SMIL7g.svg
 +
 +
== Stopping / pausing animation ==
 +
 +
'''Pendulum example'''
 +
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/pendula.svg
 +
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/pendula2.svg (Using functions instead, just for show ....)
 +
* http://tecfa.unige.ch/guides/svg/ex/smil-dom/pendula.html (HTML5 variant, Animation stopped after loading)
 +
 +
<source lang="XML" enclose="div">
 +
<?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>
 +
</source>
 +
 +
[[Category: SVG]]

Latest revision as of 19:24, 22 August 2016

Draft

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.

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:

Combined click/mouse over

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

Motion animation

Example showing how to start a motion animation:


Alternative examples:

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>
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Interactive_SVG-SMIL_animation_tutorial&oldid=59965"