Discussion :

[garheb]

Bonjour,

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

Sous Firefox tout s'affiche correctement:



Par contre, sous Chrome le texte a disparu:



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

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
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 à 90', '91 à 150', '151 à 230', '231 à 330', '331 à 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.