p
u
b
l
i
c
i
t
é
publicité
  1. #1
    Invité de passage
    Inscrit en
    janvier 2012
    Messages
    15
    Détails du profil
    Informations forums :
    Inscription : janvier 2012
    Messages : 15
    Points : 1
    Points
    1

    Par défaut Tracé dynamique et SVG+JS

    Bonjour,

    je veux que mon SVG se génère au fur et à mesure, voir le décomposé des tracés pour ça j'ajoute du javascript à mon SVG.
    Je commence par tracé un rectangle que je décompose en 4 segment que je veux tracé progressivement, voici le code pour les 3 premiers segments.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
      /*1*/
      newLine1 = document.createElementNS(svgNS, 'line');
      newLine1.setAttributeNS(null, 'class', "workingLines");
      newLine1.setAttributeNS(null, 'x1', x1+5);
      newLine1.setAttributeNS(null, 'y1', y1-5);
      newLine1.setAttributeNS(null, 'x2', x1+5);
      newLine1.setAttributeNS(null, 'y2', y1-5-55);
     
      newAnim1 = document.createElementNS(svgNS, 'animate');
      newAnim1.setAttributeNS(null, "attributeName", "y2");
      newAnim1.setAttributeNS(null, "dur", "3s");
      newAnim1.setAttributeNS(null, "from", "" + y1 - 5);
      newAnim1.setAttributeNS(null, "to", "" + y1 - 5 - 55);
     	newLine1.appendChild(newAnim1);
     
    	document.rootElement.appendChild(newLine1);
     
      /*2*/
      newLine2 = document.createElementNS(svgNS, 'line');
      newLine2.setAttributeNS(null, 'class', "workingLines");
      newLine2.setAttributeNS(null, 'x1', x1+5);
      newLine2.setAttributeNS(null, 'y1', y1-5-55);
      newLine2.setAttributeNS(null, 'x2', x1+5);
      newLine2.setAttributeNS(null, 'y2', y1-5-55);
     
      newAnim2 = document.createElementNS(svgNS, 'animate');
      newAnim2.setAttributeNS(null, "attributeName", "x2");
      newAnim2.setAttributeNS(null, "begin", newAnim1.end);
      newAnim2.setAttributeNS(null, "dur", "3s");
      newAnim2.setAttributeNS(null, "from", "" + x1 + 5);
      newAnim2.setAttributeNS(null, "to", "" + x1 + 5 + 78);
     	newLine2.appendChild(newAnim2);
     
    	document.rootElement.appendChild(newLine2);
     
      /*3*/
      newLine3 = document.createElementNS(svgNS, 'line');
      newLine3.setAttributeNS(null, 'class', "workingLines");
      newLine3.setAttributeNS(null, 'x1', x1+5+78);
      newLine3.setAttributeNS(null, 'y1', y1-5-55);
      newLine3.setAttributeNS(null, 'x2', x1+5+78);
      newLine3.setAttributeNS(null, 'y2', y1-5);
     
      newAnim3 = document.createElementNS(svgNS, 'animate');
      newAnim3.setAttributeNS(null, "attributeName", "y2");
      newAnim3.setAttributeNS(null, "begin", newAnim2.end);
      newAnim3.setAttributeNS(null, "dur", "3s");
      newAnim3.setAttributeNS(null, "from", "" + y1 - 5 - 55);
      newAnim3.setAttributeNS(null, "to", "" + y1 - 5);
     	newLine3.appendChild(newAnim3);
     
    	document.rootElement.appendChild(newLine3);
    Malheureusement ça ne produit pas le résultat escompté... Le premier segment newLine1 et son anim associée, OK tout va bien, je vois le tracé se faire. Par contre, alors que je pensais animer le 2ème segment dans la continuité temporelle du premier grâce au "begin" newAnim1.end, en fait les segement 2 et 3 apparaissent entier, sans animation à t0, alors que l'animation du segment 1 se lance. Une idée ?

    Merci

  2. #2
    Membre Expert
    Inscrit en
    octobre 2011
    Messages
    791
    Détails du profil
    Informations forums :
    Inscription : octobre 2011
    Messages : 791
    Points : 1 373
    Points
    1 373

    Par défaut

    Vous devriez [1] ajouter un attribut id pour NewAnim1 et puis [2] le réferer dans NewAnim2... ainsi de suite.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /*1*/
    //...etc etc...
    newAnim1 = document.createElementNS(svgNS, 'animate');
    newAnim1.setAttribute("id", "an1");
    //...etc etc...
     
    /*2*/
    //...etc etc...
    newAnim2.setAttributeNS(null, "begin", newAnim1.getAttribute("id")+".end");
    //...etc etc...

Discussions similaires

  1. le SVG dynamique .
    Par gomrinho dans le forum Langage
    Réponses: 4
    Dernier message: 30/03/2010, 14h03
  2. [XSLT] Intégrer une image SVG créée dynamiquement
    Par HomoErectus dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 01/09/2009, 10h32
  3. tracé dynamique en flash
    Par eveilside dans le forum Flash
    Réponses: 5
    Dernier message: 14/05/2007, 13h39
  4. générer dynamiquement du SVG
    Par 18Marie dans le forum Syntaxe
    Réponses: 3
    Dernier message: 27/07/2006, 16h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo