Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 2 sur 2
  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 :
    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
    667
    Détails du profil
    Informations forums :
    Inscription : octobre 2011
    Messages : 667
    Points : 1 069
    Points
    1 069

    Par défaut

    Vous devriez [1] ajouter un attribut id pour NewAnim1 et puis [2] le réferer dans NewAnim2... ainsi de suite.
    Code :
    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...

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •