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>

Consignes -- Joyce Maurin (discussion) 18 octobre 2015 à 12:11 (CEST)

Bonjour,

Je suis en train de remplir mon rapport pour l'exercice deux et j'ai un problème de compréhension d'une des consignes.

Lorsque vous dites "indiquez avec quelle configuration on peut voir votre contenu", qu'entendez-vous par "configuration" ?

Merci d'avance,

Joyce

Re: Consignes -- Daniel K. Schneider (discussion) 18 octobre 2015 à 12:46 (CEST)

Configuation = Machine (OS) et navigateur. Par exemple Win8/Firefox 41

La raison est juste qu'il peut tjrs avoir qqs. trucs encore mal implémentés. Donc on peut vérifier si c'est votre faute ou celui de navigateur.

Voir: http://caniuse.com/#search=svg

- salutations !