STIC Discussion:STIC I - exercice 5 (Nestor-Pixel)

Animation

Je souhaite faire une rotation sur deux objets de mon dessin (faits dans Inkscape), l'un porte le nom path6744 et l'autre path6563, j'ai donc écrit :

<animate xlink:href="#path6744" attributeType="auto" type="rotate" values="0 150 300; 360 150 300" begin="0s" dur="30s"/> 	     
       
<animate xlink:href="#path6563" attributeType="auto" type="rotate" values="0 150 300; 360 150 300" begin="0s" dur="30s"/>

que j'ai placé entre les balises <defs>. La rotation concerne 2 spirales.

Puis j'ai déclaré xmlns:xlink="http://www.w3.org/1999/xlink" entre les balises <svg>

J'ai essayé aussi de faire autrement en plaçant la ligne animate "près" de l'objet 6744, c'est à dire entre les balises <path>.

En fait il n'y a rien qui marche. Je précise que j'ai téléchargé le plugin svg viewer ainsi qu'Opéra, et sous Opéra, j'ai testé, d'autres animations marchent correctement.

A priori j'ai enregistré correctement sous Inkscape (en svg simple). Et dans le code source pas de namespace Inkscape (pour autant que je puisse m'en rendre compte..).

Je précise que mon document xhtml sort well-formed mais n'est pas validé.

bon voilà j'ai tout dit :-) (pour le contenu en rapport avec Maltt, je n'avais pas d'idée à part faire une page pour les pages travaux de tout le monde mais j'ai vu que ça avait été déjà fait moults fois les années précédentes)

je ne trouve pas pquoi ça ne marche pas. Pouvez-vous m'aider svp ?

J'ai placé le fichier ici [1]

Sylviane 6 novembre 2007 à 9:00 (CET)

réponse

En fait c'est juste un détail qui coince. Effectivement les 2 solutions: placer l'animation dans un groupe ou référer vers l'id d'un objet marchent.

Par contre, vous utilisez mal les balises. Voici la bonne syntaxe pour une balise SMIL:

  <animateTransform attributeName="transform" xlink:href="#path6563" type="rotate" values="0 150 300; 360 150 300" begin="0s" dur="30s"/>   

ou encore:

<g>
  <path   ...... />
  <animateTransform attributeName="transform" type="rotate" values="0 150 300; 360 150 300" begin="0s" dur="30s"/>
</g>

Donc pour une rotation simple, faut utiliser la balise animateTransform, puis spécifier attributeName="transform" et type="rotation".

Vrai que je demande qu'un fichier bien formé, par contre dans un cas pareil, il est utile d'importer juste la partie SVG dans un éditeur XML et on voit tout-de-suite où est l'erreur :)

Attention vous n'êtes pas sortie des vos peines, les path dessinés par Inkscape ont l'origine qq. par loin du centre de l'objet. Donc la rotation se fait par défaut autour du 0,0 et dans votre cas du x=150 et y=300. Va falloir jouter avec les parametres cx cy de l'attribut valeurs.

values="360 200 200;0 200 200"

veut dire rotation qui va de 360 à 0 degrés autour des coordonnées x=200 et y =200 si je me souviens bien (l'est tard ...dites-moi si cela donne qc ...)