Workshop : SVG and Animation (SMIL, script based)

Organizers: Stefan Goessner,  Michel Hirtzler

Progressive drawing  

Content: 
- use 'animate' on 'dashoffset' in 'style'
- use 'accessKey()' and 'animation_id.end' to start animation
- use javascript to know length of curve, to modify attribute in 'anime' and 'style' element
- use javascript to calculate length of circle, polygon .....

1) Swiss map using stroke-dasharray and stroke-dashoffset

Example - change values for stroke-dasharray and stroke-dashoffset, and in 'animate' element

2) How know length of path ?

Example - Swiss is draw in anticlockwise, how draw it in clockwise ?

3) Use javascript to put values for stroke-dasharray and stroke-dashoffset in 'style' and 'animate' element

Example  - 

4) Add filling of Swiss

Example -

5) Draw a circle 

Example - 

6) Draw a polygon

Example  - 

7) Draw a ellipse

Example -