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

De EduTech Wiki
Aller à la navigation Aller à la recherche

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 ...)

wâââ

trop bien ! ça marche ! j'adore quand ça marche. Par contre effectivement faut que je calcule la position, ça rotate loin là :-) merci beaucoup

Sylviane

Montagnes russes

je souhaiterais faire un svg simple : des montagnes russes et une balle qui suit la courbe de ces montagnes russes.

J'ai regardé dans votre cours et j'ai pensé qu'animateMotion (exemple 2.6) irait pas mal

exemple dans votre cours :

<animateMotion dur="6s" repeatCount="indefinite" path="M100,250 C 100,50 400,50 400,250" rotate="auto"/>

mais en fait je ne comprends pas bien si l'animateMotion doit être dans le path du tracé des courbes ou dans le path de la boule ou s'il faut remettre le tracé des courbe dans le path de la boule.

(j'ai essayé plusieurs choses et finalement j'ai tout qui bouge :-)

Question subsidaire : si je parviens à faire ce schéma, je voudrais le mettre dans le cours pour l'exo 4. Est-ce que dans eXe je peux importer du svg ? je n'ai pas l'impression...

Sylviane 12 novembre 2007 à 22:51 (CET)Répondre[répondre]

animatMotion

Cette balise doit se trouver à l'intérieur de la balle (de l'objet qui bouge), ou équivalent. Ceci est le cas pour toutes les balises d'animation:

  • On dessine un objet
  • A l'intérieur (comme enfant direct) on met la balise d'animation (ou alternativement on fait un lien comme vous l'avez fait ci-dessus, section 1.1).

Ensuite, si vous voulez que le chemin (path) soit affiché, il faudrait aussi le dessiner. Mais cela n'a rien a voir avec l'animation en soi. Donc: un path pour la balle, un dessin pour la montagne russe. Les deux peuvent effectivement utiliser plus ou moin les mêmes coordonnées.

Voici un exemple qui vient du manuel SVG officiel: 

 <!-- Dessine le contour du trace de mouvement en bleu, donc un demi cercle inversé et visible -->
  <path d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06"  />
  
 <!-- Voici un triangle qui se deplacera sur le trace de mouvement.
       Il est defini avec une orientation verticale, la base du triangle etant
       centree horizontalement juste au-dessus de l'origine. -->
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >

    <!-- Definit l'animation sur le trace de mouvement
         Cela se fait à l'intérieur de l'objet à bouger (un petit triangle) -->
    <animateMotion dur="6s" repeatCount="indefinite"
       path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
  </path>

Importation dans eXe. Le mettre dans exe est peut-être possible, mais je n'ai pas le temps de chercher. Y a peut-etre plus simple je crois: A mon avis vous pouvez essayer de l'importer avec un iframe et le chercher avec un URL complet. Enfin je ne peux pas vous garantir si eXe l'autorise ou ce Moodle va en faire. Parfois on interdit les iframes, car c'est un bon plan pour diminuer la sécurité d'un site .... 

 <iframe src="http://tecfa.unige.ch/...../x.svg" height="200" width="100"></iframe>

- Daniel K. Schneider 13 novembre 2007 à 09:17 (CET)Répondre[répondre]


OK, je comprends. Merci beaucoup, je vais essayer.Sylviane 13 novembre 2007 à 10:38 (CET)Répondre[répondre]

faute dans la déclaration de l'élément svg -- Gur 2 décembre 2009 à 13:27 (CET)

Jai adapté la svg des câbles de la salle du fond http://tecfa.unige.ch/guides/svg/ex/svg-intro/inkscape-drawing/cables_salle_du_fond.xhtml

Il y a une erreur avec ma déclaration du svg: 

  L'éditeur (Oxygen) m'annonce      F [Xerces] Element type "svg" must be followed by either attribute specifications, ">" or "/>".

 Firefox affiche :  XML Parsing Error: not well-formed

Location: file:///Users/moniquegur/Desktop/logotecfa.xhtml Line Number 34, Column 26: standalone="no"?>

^

Où est ma faute?

le lien vers mon dossier: http://tecfa.unige.ch/etu-maltt/maya/gur/stic/ex5/logotecfa.xhtml

Merci pour votre aide.

Re: faute dans la déclaration de l'élément svg -- Daniel K. Schneider 2 décembre 2009 à 13:45 (CET)

  • La balise SVG début contient une fin d'instruction de traitement (à virer)
  • Faut enlever la DTD. Une DTD n'a rien a chercher à l'intérieur d'un document

Faux: 

     <svg
          xmlns:svg="http://www.w3.org/2000/svg"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 400.0 400.0" 
          standalone="no"?> 
         <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Juste: 

    <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 400.0 400.0" 
          standalone="no" >
  • Il manque la balise de fermeture </svg> à la fin
  • Le namespace est faux. Vous déclarez un prefix alors que vous ne l'utilisez pas

... en gros, regardez l'exemple SVG#XHTML_integration

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC_Discussion:STIC_I_-_exercice_5_(Nestor-Pixel)&oldid=14037 »