Interactive SVG-SMIL animation tutorial: Difference between revisions
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...") |
mNo edit summary |
||
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 17:51, 10 February 2014
<pageby nominor="false" comments="false"/>
Introduction
This short tutorial will provide an introduction to adding some interactivity to dynamic SVG, ie. SVG-SMIL animation
Prerequisites:
See also:
Alternative reading:
- SVG Essentials/Animating and Scripting SVG (Chapter from the Eisenberg book)
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>
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:
Motion animation
Example:
- http://tecfa.unige.ch/guides/svg/ex/smil-dom/drive-start.svg
- http://tecfa.unige.ch/guides/svg/ex/smil-dom/drive-start.html
Alternative examples: