1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
|
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="10cm"
height="10cm"
viewBox="0 0 100 100" >
<use xlink:href="grille.svg#grille" />
<circle id="rouge" cx="20" cy="80" r="5" fill="red" />
<circle id="vert" cx="40" cy="80" r="5" fill="green" />
<path id="chemin"
d="M 20,50
a1,2 0 0,0 10,0
a1,2 0 0,1 10,0
a1,3 0 0,0 10,0
a1,4 0 0,1 10,0
a1,5 0 0,0 10,0
a1,4 0 0,1 10,0
a1,3 0 0,0 10,0
a2,2 0 0,0 -70,0
"
fill="none" stroke="blue" stroke-width="1" />
<circle r="1.5" stroke-width="0" fill="red" >
<animateMotion begin="rouge.mouseover" end="rouge.mouseout" dur="6s" fill="freeze" repeatCount="indefinite" >
<mpath xlink:href="#chemin"/>
</animateMotion>
</circle>
<circle r="1.5" stroke-width="0" fill="green" >
<animateMotion begin="vert.click" end="vert.click" dur="9s" fill="freeze" repeatCount="indefinite" >
<mpath xlink:href="#chemin"/>
<animateMotion>
</circle>
</svg> |
Partager