Partage
  • Partager sur Facebook
  • Partager sur Twitter

[SVG] lecture animée de svgS

Sujet résolu
    3 mars 2006 à 15:55:54

    Bonjour,

    La doc svg et les tutos associés sur internet pour l'instant c'est du gros caca.

    Mon programme dump des fichiers svg (des jolis cercles qui ont un sens dans mon cas).

    Pour (re)voir l'évolution de mes données j'aimerais pouvoir "faire defiler" mes fichiers svg un par un selon une certaine vitesse.
    SVG permet d'includer des fichiers svg, SVG permet d'animer des objets.

    Comment donc animer ... des fichiers.

    (En SVG seulement , pas envie d'aller rajouter du javascript).

    Merci d'avance
    • Partager sur Facebook
    • Partager sur Twitter
      3 mars 2006 à 16:02:50

      Sans javascript ca doit pas etre possible ... vu qu'il faut une analyse des fichiers svg disponible et que le svg ne le permet pas (un script serveur pourrait faire l'affaire)
      • Partager sur Facebook
      • Partager sur Twitter
        3 mars 2006 à 16:05:57

        Le svg général peut aussi etre généré par mon prog pour donner le nom des fichiers à utiliser.

        Ce que je veux c'est comment faire une boucle animée avec des fichiers svg. Les détails annexes je m'en charge :)

        Edit : bon et si il y a besoin d'un chouilla de javascript pour changer le sous-fichier svg inclu, je veux bien au final... du moment que j'ai un truc qui permet de voir la dynamique de mon système.
        • Partager sur Facebook
        • Partager sur Twitter
          5 mars 2006 à 9:04:17

          Slt,

          je ne comprends pas très bien (mais ça doit surement être possible sans js je te rassures ^^).

          Est ce que tu fais de l'inclusion via un attribut xlink:href ?

          a+

          EDIT :
          tu peux faire un truc du genre :
          <use xlink:href="mondoc.svg#image1" x="10" y="10">
          <animate attributeName="xlink:href" attributeType="XML" values="mondoc.svg#image1;mondoc.svg#image2;mondoc.svg#image3;mondoc.svg#image4;mondoc.svg#image5" begin="0s" dur="10s" repeatCount="indefinite"/>
          </use>

          et comme ça tu as un boucle infinie de période 10s dans laquelle défile les 5 image par par période de 2s !
          • Partager sur Facebook
          • Partager sur Twitter
            6 mars 2006 à 13:15:01

            Merci tanguy pour ta réponse. C'est exactement ce que je veux. Maintenant il va falloir quelques efforts pour le faire marcher.

            Exemple de fichier de donnée (je veux qu'ils soient utilisables indépendament de celui qui fait l'animation) fichier clustering_60000.svg

            <?xml version="1.0" standalone="no"?>
            <!DOCTYPE svg PUBLIC "–//W3C//DTD SVG 1.1//EN"
            "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

             <defs>
            <g id="items">
            <circle cx="281.732" cy="229.637" r="1" fill="none" stroke="black" />
            ... //pleins d'autres cercles
             </g>

             </defs>
             <use x="0" y="0" xlink:href="#items" />
            </svg>


            Et un essai (avant même d'animer) d'inclusion de #items dans un autre fichier (celui qui fera l'animation) fichier clustering__anim.svg

            <?xml version="1.0" standalone="no"?>
            <!DOCTYPE svg PUBLIC "–//W3C//DTD SVG 1.1//EN"
            "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <use x="0" y="0" xlink:href="clustering_60000.svg#items" />
            <!––<animate attributeName="xlink:href" attributeType="XML" values="clustering_60000.svg#items;clustering_10440000.svg#items" begin="0s" dur="2s" repeatCount="indefinite"/>
            </use>––>
            </svg>


            Et bien je ne vois rien en affichant clustering__anim.svg sous FF alors que clustering_60000.svg marche bien. Qu'est ce que je fais de mal dans href ?
            • Partager sur Facebook
            • Partager sur Twitter
              6 mars 2006 à 18:37:24

              Slt,

              pour commencer, laisse moi te dire que tu es fou de vouloir dévelloper du SVG avec Firefox ! Si quelqu'un t'as dit que Firefox supporte le SVG, il t'as menti ! Firefox supporte une petite partie de la norme SVG - peut être 20% - et la partie la plus facilement implémentable ! En plus, certains éléments sont dits implémentés mais sont en fait buggés et incomplets.

              C'est le cas de l'élément <use/>. Le bug 269482 indique qu'il n'est pas possible d'utiliser une référence à un autre document dans l'attribut xlink:href de <use/>. De toute façon, Firefox ne gère pas l'animation... Donc retourne sous Firefox 1.0 ou Internet Explorer avec le plugin ASV6 d'Adobe (à copier dans le répertoire plugin du navigateur) pour faire du SVG.

              C'est moche mais c'est comme ça : l'implémentation de SVG est actuellement nulle à chier (et crois moi je suis le premier à être emmerdé :S).

              a+ et vive SVG quand même !
              • Partager sur Facebook
              • Partager sur Twitter
                6 mars 2006 à 18:44:56

                Ok c'est bien ce que je pensais. Les tutos svg que je croisais sur le net ne marchait pour la plupart pas.
                J'avais déjà le plugin adobe avant ff 1.5.

                Pour info il est possible de l'utiliser avec 1.5 en tapant : about:config dans FF, puis chercher svg.enabled et le mettre à false.
                Ansi le plugin built-in svg est désactivé au profit d'un plugin tiers.

                Je vais essayer alors et te tiens au courant.

                Merci encore.

                Edit : bon et ben avec le viewer 3 (celui sur le site, où t'as chopé le 6 ?) et IE ou FF, le anim même pas animé encore juste avec un href externe ne marche pas. Qu'est ce que je fais mal alors ?
                • Partager sur Facebook
                • Partager sur Twitter
                  6 mars 2006 à 21:18:30

                  Re,

                  premièrement vérifie que tes fichiers sont bien encodés en utf-8.
                  Après, je pense que tu devrais spécifier une taille à ton document SVG, car sans les attributs width et height, c'est 100% pour les 2 !

                  Je me souvient avoir déjà réussi à faire une inclusion externe avec <use/>, mais je viens de réessayer et je n'y arrive plus (asv3/ie).

                  Pour asv6, c'est la version bêta en dévellopement du viewer d'Adobe, que je trouve plus performant.

                  Je re quand j'ai du neuf.

                  ++
                  • Partager sur Facebook
                  • Partager sur Twitter
                    6 mars 2006 à 21:20:38

                    T'en fais pas quand j'arriverai à inclure j'aurais une taille et même une viewbox.

                    Mais allons-y étape par étape :)

                    J'attends ton re. (prends ton temps)
                    • Partager sur Facebook
                    • Partager sur Twitter
                      6 mars 2006 à 21:29:14

                      Juste pour patienter de ton côté et si tu t'intéresses à l'animation, tu peux regarder les exemples sur mon ftp à cette adresse :
                      http://skedar.dark.free.fr/programmation/svg/

                      Là je suis en plein bac blanc (et en plus en train de mater la tv) mais tu peux aller voir du côté de:
                      http://writing-pad.forumactif.com/
                      http://www.svgfr.org/

                      a+
                      • Partager sur Facebook
                      • Partager sur Twitter
                        8 mars 2006 à 10:23:54

                        Je suis pas tant interessé par l'animation que part la facilité de création du svg qui en fait un format idéal pour l'export de données "graphiques" en programmation.

                        Je te donne un peu de background si ça t'interesses :
                        Le programme en question ici est une simulation de fourmilière en 3D. Sont implémentés pour l'instant 2 "tâches" pour les fourmis : chercher de la nourriture (avec tout le système de phéromones que ça implique) et "corpse clustering" (désolé je trouve pas un équivalent propre "l'aggrégation de cadavre" ça sonne naze).

                        Je me sers du svg pour :
                        - dans le cas des phéromones, garder une trâce de la position des phéromones et leur intensité. Il est alors possible de re-voir offline la dynamique du système (sans avoir à faire des screenshots subjectifs tous les X temps).
                        - dans le cas du clustering, je prefere même directement regarder le svg épuré qui me permet de voir la répartition des objets dans la fourmilière et donc juger de l'efficacité des fourmis.

                        Dans un cas comme dans l'autre j'aimerai pouvoir faire un replay de l'évolution du système via l'animation d'Svgs.

                        Donc hésites pas à me dire comment tu avais fait pour inclure un svg externe ;)
                        • Partager sur Facebook
                        • Partager sur Twitter
                          8 mars 2006 à 18:58:45

                          Slt,

                          ceci a fonctionné avec NPSVG6.dll :

                          textPath.svg
                          <?xml version="1.0" encoding="iso–8859–1"?>
                          <?xml–stylesheet type="text/css" href="textPath.css" charset="iso–8859–1"?>

                          <!DOCTYPE svg PUBLIC "–//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC–SVG–20010904/DTD/svg10.dtd">

                          <svg width="100%" height="100%" xml:lang="fr" viewBox="0 0 400 300" preserveAspectRatio="XmidYMid meet"
                          xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink">


                          <title>Du texte sur un chemin</title>

                          <path id="chemin" d="M 50‚150 Q 100‚38 200‚150 T 380‚160"/>

                          <text>
                                  <textPath xlink:href="#chemin">
                                  Vrou vroum vrrroooooouuuuuuummmmmm hhhhhhhhhhhiiiiiiiiiiiiiiiikkkkkkkkkkkkkkkkkkkk boum paf chlank
                                  </textPath>
                          </text>

                          </svg>


                          textPath-2.svg
                          <?xml version="1.0" encoding="iso–8859–1"?>
                          <?xml–stylesheet type="text/css" href="textPath–2.css" charset="iso–8859–1"?>

                          <!DOCTYPE svg PUBLIC "–//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC–SVG–20010904/DTD/svg10.dtd">

                          <svg width="100%" height="100%" xml:lang="fr" viewBox="0 0 400 300" preserveAspectRatio="XmidYMid meet"
                          xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink">


                          <title>Du texte sur un chemin invisible</title>

                          <defs>
                                  <text id="phrase">Le chemin utilisé n'est plus visible !</text>
                          </defs>

                          <text>
                                  <textPath xlink:href="textPath.svg#chemin">
                                          <tref xlink:href="#phrase"/>
                                  </textPath>
                          </text>

                          </svg>


                          À noter que comme le support dans Firefox, NPSVG3.dll ne supporte pas l'appel de documents externes.

                          C'est dommage car la réutilisabilité c'est un des points forts de SVG et là, ça le bride !

                          Donc si tu peux, utilise NPSVG6.dll !

                          C'est complètement en SVG ton projet ?

                          a+
                          • Partager sur Facebook
                          • Partager sur Twitter
                            8 mars 2006 à 21:31:16

                            Non mon projet n'est pas complètement en SVG, même pas du tout.
                            Il est codé en C++ et utilise le moteur 3D Irrlicht.
                            Le svg n'est ici que pour faire un replay simplifié de ce qui s'est déjà déroulé.

                            Merci en tout cas avec la version 6 ça marche.
                            Bizarrement j'ai du virer le doctype car même en mettant le tiens moi ça passait pas.

                            En tout cas now ça marche.
                            Merci bien
                            • Partager sur Facebook
                            • Partager sur Twitter
                              8 mars 2006 à 21:46:44

                              De toute façon il est conseillé de ne plus mettre le doctype. Par contre dans ce cas un attribut version="1.1" sur le <svg/> racine devient indispensable :).

                              a+
                              • Partager sur Facebook
                              • Partager sur Twitter

                              [SVG] lecture animée de svgS

                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                              • Editeur
                              • Markdown