Daniel K. Schneider: Text replacement - "$" to " {{edutechwiki}}"

2021-04-10T00:18:25Z

Text replacement - "$" to " {{edutechwiki}}"

← Older revision		Revision as of 02:18, 10 April 2021
Line 126:		Line 126:

	[[Category: SVG]]		[[Category: SVG]]
			{{edutechwiki}}

Daniel K. Schneider: 1 revision imported

2021-04-09T22:47:05Z

1 revision imported

← Older revision	Revision as of 00:47, 10 April 2021
(No difference)

Daniel K. Schneider: Text replacement - "" to ""

2016-08-22T17:24:00Z

Text replacement - "<pageby nominor="false" comments="false"/>" to ""

New page

{{web technology tutorial|Intermediate}}
{{stub}}

== Introduction ==

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:
* [[Using SVG with HTML5 tutorial]]
* [[Static SVG tutorial]]
* [[SVG-SMIL animation tutorial]]

See also:
* [[SVG]] (Short overview)
* [[SVG links]] (links to various SVG resources)

Alternative reading:
* [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG 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 <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 ==

Example showing how to start a motion animation:
* 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 (HTML5 + SVG)

Alternative examples:
* 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]]

Interactive SVG-SMIL animation tutorial - Revision history

Daniel K. Schneider: Text replacement - "$" to " {{edutechwiki}}"

Daniel K. Schneider: 1 revision imported

Daniel K. Schneider: Text replacement - "" to ""