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
Line 24: Line 24:
 
== Simple click and mouse-over examples ==
 
== Simple click and mouse-over examples ==
  
 +
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>
 +
 +
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)
 +
 +
 +
More examples:
 
* http://tecfa.unige.ch/guides/svg/ex/mouse-over/
 
* http://tecfa.unige.ch/guides/svg/ex/mouse-over/
  

Revision as of 18:51, 10 February 2014

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

Draft

1 Introduction

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

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>

Source code:


More examples:

3 Motion animation

Example:


Alternative examples: