Discussion :

[daajack]

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

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

[daajack]

Bon le code en brute ça donne :

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
 
  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 :

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
 
<?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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 rect = document.createElement('rect');

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

et puis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[daajack]

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

Et ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !".

[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é ??

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+ !