Google Chrome - support de la balise text de SVG

2 pièce(s) jointe(s)

Bonjour,

J'ai créé une petite image en Svg représentant les catégories énergétiques des logements.

Sous Firefox tout s'affiche correctement:

Pièce jointe 129013

Par contre, sous Chrome le texte a disparu:

Pièce jointe 129014

Donc je sais bien que certains navigateurs soient à la traine pour certaines choses, mais ça m'étonne assez de Chrome.

Les versions utilisées:

Google Chrome Version 32.0.1671.3 dev (unstable)
Google Chrome Version 30.0.1599.101 (stable)
Mozilla Firefox 24.0

Le code utilisé:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
(function() {
    var categorieEnergetique;
    var map = document.getElementById('coefEnergetique');
    var baliseSvg = map.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
    baliseSvg.setAttribute('height', '300');
    baliseSvg.setAttribute('width', '300');
 
    var couleurs = ['#339933', '#33cc33', '#ccff33', '#ffff00', '#ffcc00', '#ff9933', '#ff0000'];
    var categories = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    var valeurs = ['=50', '51 &agrave; 90', '91 &agrave; 150', '151 &agrave; 230', '231 &agrave; 330', '331 &agrave; 450', '>450'];
 
 
    baliseSvg.innerHTML = '';
 
    var tailleBoutFleche = 1;
    var largeurFleche = 1.3;
    var taillePolice = largeurFleche/2;
    var ecartEntreFleches = 0.2;
    var yLigneHaut = largeurFleche+ecartEntreFleches;
    var longueurFleche = 1.2;
    var xDroite = 2.2;
    var debutXFleche = 0.2;
    var maxX=(couleurs.length+1+debutXFleche)*longueurFleche+tailleBoutFleche; //coordonnée x max
    var maxY=(((couleurs.length-1)*yLigneHaut)+largeurFleche); //coordonnée y max
 
    for(var i=0;i<couleurs.length;i++) {
 
        var coordonnees = [[debutXFleche, i*yLigneHaut], //haut gauche
        [(i+1+debutXFleche)*longueurFleche, i*yLigneHaut], //haut droite
        [(i+1+debutXFleche)*longueurFleche+tailleBoutFleche, i*yLigneHaut+(largeurFleche/2)], //milieu droite
        [(i+1+debutXFleche)*longueurFleche, i*yLigneHaut+largeurFleche], //bas droite
        [debutXFleche, i*yLigneHaut+largeurFleche], //bas gauche
        [debutXFleche, i*yLigneHaut]]; //point de départ
        var toSvg = '';
        for(var j=0;j<coordonnees.length;j++) {
            if(j===0) {
                toSvg += 'M ' + coordonnees[j][0] + ' ' + coordonnees[j][1];
            } else {
                toSvg += ' L ' + coordonnees[j][0] + ' ' + coordonnees[j][1];
            }
        }
 
        var balisePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        balisePath.setAttribute('fill', couleurs[i]);
        balisePath.setAttribute('d', toSvg);
        balisePath.setAttribute('data-categorieEnergetique', categories[i]);
        balisePath.onmouseover = function(e) {
            this.setAttribute('stroke', 'black');
            this.setAttribute('stroke-width', '0.1');
        };
        balisePath.onmouseout = function(e) {
            this.removeAttribute('stroke');
            this.removeAttribute('stroke-width');
        };
        balisePath.onclick = function(e) {
            this.removeAttribute('stroke');
            this.removeAttribute('stroke-width');
            categorieEnergetique = this.getAttribute('data-categorieEnergetique');
        };
 
        var texteEnergetique = document.createElementNS("http://www.w3.org/2000/svg", "text");
        texteEnergetique.setAttribute('x', (i+1+debutXFleche)*longueurFleche-(longueurFleche/3));
        texteEnergetique.setAttribute('y', i*yLigneHaut+(largeurFleche/2)+(taillePolice/3));
        texteEnergetique.setAttribute('font-size', taillePolice);
        texteEnergetique.innerHTML = categories[i];
 
        var texteValEnergetique = document.createElementNS("http://www.w3.org/2000/svg", "text");
        texteValEnergetique.setAttribute('x', debutXFleche+0.1);
        texteValEnergetique.setAttribute('y', i*yLigneHaut+(largeurFleche/2)+(taillePolice/6));
        texteValEnergetique.setAttribute('font-size', taillePolice/2);
        texteValEnergetique.innerHTML = valeurs[i];
 
        baliseSvg.appendChild(balisePath);
        baliseSvg.appendChild(texteEnergetique);
        baliseSvg.appendChild(texteValEnergetique);
    }
    var champDeVue = '0 0 ' + maxX + ' ' + maxY;
    baliseSvg.setAttribute('viewBox', champDeVue);
})();

Est-ce que c'est l'unique faute de Chrome ou bien j'ai oublié quelque chose et Firefox arrive à faire le boulot sans mais pas Chrome?

Merci d'avance pour vos réponses.

Bonjour,
cette syntaxe est a proscrire texteEnergetique.innerHTML = categories[i];.

Il est préférable d’utiliser
Code:

1 2 3 // texteEnergetique.innerHTML = categories[i]; var oTxt = document.createTextNode(categories[i]); texteEnergetique.appendChild(oTxt);

Parfait!

Une question supplémentaire: Est-ce possible de supprimer la "hitbox" de ces nodes? Faire en sorte que si on clique sur cette node, ce soit l'élément dessous qui gère le click?

Merci en tous cas.

Edit: J'ai contourné le problème en propageant l'évènement des balises paths.