[DOM] Génération SVG : Balise invisible

Version imprimable

25/03/2008, 09h14
daajack

[DOM] Génération SVG : Balise invisible

Bonjour tlm,

Voilà, je voudrais faire un petit jeu de gestion en svg / javascript, et j'ai un problème qui est survenu très vite et qui m'empêche de continuer.
Je voudrais générer mes nodes directement dans javascript par des document.createElement() puis des appendChild(), mon code généré est correct mais la balise reste invisible sous firefox.

Vous allez me dire, "Es-tu sûr que ton code est correct ?" à quoi je répondrai "Oui petit impertinent !" car j'ai recopié le code généré, collé directement dans mon image et la résultat est bien celui attendu, comme si firefox ne supportait pas la génération de balise svg à la volée.
Cependant une chose me rassure, avec firebug je peux voir la balise générée, et elle apparaît effectivement comme une balise html cachée (avec un display: none), fx la reconnaît donc comme cachée, c'est bon signe. Et si je l'edit avec firebug toujours (sans rien modifier en fait), subitement la balise n'est plus cachée comme si firebug forçait le réaffichage de l'image.

A noter que si l'on modifie des attributs des balises existantes, ça fonctionne sans problème, fx tolère donc les modifications à la volée... mais peut-être pas la création....

Merci de votre attention honorables développeurs, que votre savoir éclaire la route de mon éveillement intellectuelle.

P.S: Même problème sous safari, mais je n'ai pas encore testé sous fx3
25/03/2008, 09h16
SpaceFrog

il n'y a pas de raison que firefox se comporte de la sorte ...
un bout de code nous aiderait à comprende ton souci de balise invisible ...

Bon le code en brute ça donne :

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
 
  function runScript() {
 
    var defaultSize = 25;
 
    var usine1 = new Usine(50, 80, defaultSize, defaultSize);
    var usine2 = new Usine(200, 150, defaultSize, defaultSize);
  }
 
  function Usine(posX, posY, sizeW, sizeH) {
 
    this.createRect = function(posX, posY, sizeW, sizeH) {
 
      var x = Math.round(posX - sizeW / 2);
      var y = Math.round(posY - sizeW / 2);
 
      rect = document.createElement('rect');
 
      rect.setAttribute('class', 'usine');
      rect.setAttribute('width', sizeW);
      rect.setAttribute('height', sizeH);
      rect.setAttribute('x', x);
      rect.setAttribute('y', y);
      rect.setAttribute('style', 'fill: white; stroke: black; stroke-width: 1px;');
 
      document.getElementById('layer01').appendChild(rect);
    }
 
    this.createRect(posX, posY, sizeW, sizeH);
 
  }

Avec le SVG à côté :

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
 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://web.resource.org/cc/"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="600px"
   height="400px"
   xml:space="preserve"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   id="wagon"
   onload="runScript();">
 
  <style type="text/css">
 
    .usine {
 
      fill: white;
      stroke: black;
      stroke-width: 1px;
    }
 
  </style>
  <script xlink:href="wagon.js" type="text/ecmascript" />
  <g id="layer01"></g>
</svg>

La fonction runScript() est lancé sur le onload() du document. Voici la balise 'rect' générée :

Code:

<rect class="usine" width="25" height="25" x="38" y="68" style="fill: white; stroke: black; stroke-width: 1px;"/>

Et voici le résultat visible sous firebug :

http://www.lemon-group.ch/firebug_ss.jpg

25/03/2008, 09h32
SpaceFrog
Code:

rect = document.createElement('rect');

c'estr quoi comme balise ça rect ???
pas une balise DOM en tout cas ...

et puis:
Code:

1 2 3 4 5 6 rect.className= 'usine'; rect.style.width= sizeW; rect.style.heigh= sizeH; rect.x= x; rect.y= y; rect.cssText= 'fill: white; stroke: black; stroke-width: 1px;
mais de toute façon avec une balise rect ...
mets une balise span ou div à la place ...

Touriste ! Relis le titre : ---> SVG ! :D

Et ça :
Code:

1 2 3 4 5 6 7 rect.className= 'usine'; rect.style.width= sizeW; rect.style.heigh= sizeH; rect.x= x; rect.y= y; rect.cssText= 'fill: white; stroke: black; stroke-width: 1px;
En plus de ne pas être très standard à mon avis, ça ne fonctionne pas avec les svg. Comme le grand Confucius disait : "Un setAttribute(), c'est tellement plus classe !".

25/03/2008, 09h42
SpaceFrog

Arf ... raté ...

Ben ça voudrais dire que tu ne peux pas créer de balises svg avec DOM ... ?
jett eun oeil par là :
http://www.w3.org/TR/DOM-Level-2-Cor...t-binding.html

sinon ta balise script au dessus ? elle est fermée ou pas ?
à priori oui puisqu'il y a un + à coté ??
25/03/2008, 10h02
daajack

Citation:

sinon ta balise script au dessus ? elle est fermée ou pas ?

Oui, c'est juste un lien vers le fichier js, qui apparemment fonctionne bien puisque le code est bel et bien généré.

Citation:

http://www.w3.org/TR/DOM-Level-2-Cor...t-binding.html

Cool.... mais en quoi c'est censé m'aider ? Je me sers de firebug pour voir les propriétés et méthodes à disposition. Mais je n'ai rien trouvé de plus pour le dom svg, qui permettrait p.ex. de mettre à jour l'image, ce qui soit-dit-en-passant serait dommage, je suis persuadé qu'il doit y avoir une méthode plus simple et plus performante pour affichés mes nœuds.
25/03/2008, 11h44
daajack
Okay, mon enthousiasme n'a comme seul limite d'expression que la tolérance auditive de mes collègues !

Après moultes recherches j'ai trouvé la fonction qui résout mon problème, cela venait de la création de l'objet svg qui doit se faire d'une manière particulière que voici :
Code:

1 2 3 var svgns = "http://www.w3.org/2000/svg"; rect = document.createElementNS(svgns, 'rect');
Et voili, l'objet est correctement implémentés des méthodes et propriétés inhérentes à sa fonction et il s'affiche, beau comme un chevalier de la résurrection. Merci pour ton aide Grenouille de l'Espace.

Daajack a dit : A+ !