STIC Discussion:STIC I - exercice 2 (Volt)

Path SVG -- Stephanie Perrier (discussion) 10 octobre 2015 à 18:40 (CEST)

Bonjour,

J'ai commencé de faire l'exercice 2. Il s'agit d'un jeu de découverte des antonymes. Lorsqu'on clique sur la bulle à coté du mot correspondant, la bulle est cencée se déplaçer selon un path définit ( ligne grise). Malheureusement la bulle ne se déplace pas selon la ligne grise définie. J'ai perdu beaucoup de temps à relire mon code mais rien y fait. Est-ce que qqn pourrait m'aider ?

Les fichiers se trouvent sur le serveur ici :

http://tecfaetu.unige.ch/etu-maltt/volt/perrisd0/stic-1/ex2/antonyme.html

Merci pour le coup de main !

Stéphanie

Re: Path SVG -- Daniel K. Schneider (discussion) 10 octobre 2015 à 20:24 (CEST)

AnimateMotion n'est pas sympa. Le chemin qu'on donne indique le chemin A PARTIR du point de départ. Donc voili 3 animations qui marchent (rouge, bleu, vert). A chaque fois le chemin est le même. Il part de (0,0) et va vers (405,205)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="900" height="600" id="svg2">

 <!-- Mots de base--> 
 
 <text dx="50" dy="100" style="font:35px Times New Roman" fill="blueviolet">Difficile</text>
 <text dx="50" dy="200" style="font:35px Times New Roman" fill="blueviolet">Vrai</text>
 <text dx="50" dy="300" style="font:35px Times New Roman" fill="blueviolet">Rapide</text>
 <text dx="50" dy="400" style="font:35px Times New Roman" fill="blueviolet">Propre</text>
 <text dx="50" dy="500" style="font:35px Times New Roman" fill="blueviolet">Flexible</text>
 
 <text dx="600" dy="100" style="font:35px Times New Roman">Faux</text>
 <text dx="600" dy="200" style="font:35px Times New Roman">Lent</text>
 <text dx="600" dy="300" style="font:35px Times New Roman">Facile</text>
 <text dx="600" dy="400" style="font:35px Times New Roman">Sale</text>
 <text dx="600" dy="500" style="font:35px Times New Roman">Rigide</text>
 
 
 <!-- Chemin dessiné-->    
  <path d="M195,95 L600,300" stroke="lightgrey" stroke-width="2" fill="none" id="D_Path"/>

 <!-- Chemin qui additionne des coordonnées aux 195,95 -->
 <path d="M0,0 L405,205" stroke="yellow" stroke-width="2" fill="none" id="Move_Path"/>
  
 <!-- Boutons à cliquer(3 sur 5 pour le moment) -->
 
 <circle id="Difficile" r="10" cx="190" cy="92" stroke="#000000" fill="red" fill-opacity="0.3" style="cursor:pointer;"/>
 <circle id="Vrai" r="10" cx="190" cy="194" stroke="#000000" fill="blue" fill-opacity="0.3"/>

 <circle id="Rapide" r="10" cx="190" cy="294" stroke="#000000" fill="green" fill-opacity="0.3">
   <animateMotion id="pouce_gauche_ai3" begin="Rapide.click" dur="4s"
		  fill="remove" path="M0,0 L405,205">
   </animateMotion>
 </circle>

 <circle id="Propre" r="10" cx="190" cy="394" stroke="#000000" fill="#e0e0e0" fill-opacity="0.3"/>
 <circle id="Flexible" r="10" cx="190" cy="494" stroke="#000000" fill="#e0e0e0" fill-opacity="0.3"/>
 
 <!-- animation bouton 1 (Difficile) -->
 <animateMotion id="pouce_gauche_ai" begin="Difficile.click" dur="4s"
		fill="remove" xlink:href="#Difficile">
   <mpath xlink:href="#Move_Path" />
 </animateMotion>
 
<!-- animation bouton 2 (Vrai) Lien tout en un -->
 <animateMotion id="pouce_gauche_ai2" begin="Vrai.click" dur="4s"
		fill="remove" xlink:href="#Vrai" path="M0,0 L405,205">
 </animateMotion>

</svg>