IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Google Chrome - support de la balise text de SVG


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Inscrit en
    Juin 2011
    Messages
    258
    Détails du profil
    Informations forums :
    Inscription : Juin 2011
    Messages : 258
    Par défaut Google Chrome - support de la balise text de SVG
    Bonjour,

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

    Sous Firefox tout s'affiche correctement:

    Nom : categoriesEnergetiquesFirefox.jpg
Affichages : 64
Taille : 10,4 Ko

    Par contre, sous Chrome le texte a disparu:

    Nom : categoriesEnergetiquesChrome.jpg
Affichages : 74
Taille : 6,8 Ko

    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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 200
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 200
    Par défaut
    Bonjour,
    cette syntaxe est a proscrire texteEnergetique.innerHTML = categories[i];.

    Il est préférable d’utiliser
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    //  texteEnergetique.innerHTML = categories[i];
      var oTxt = document.createTextNode(categories[i]);
      texteEnergetique.appendChild(oTxt);

  3. #3
    Membre éclairé
    Inscrit en
    Juin 2011
    Messages
    258
    Détails du profil
    Informations forums :
    Inscription : Juin 2011
    Messages : 258
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 29/04/2014, 12h25
  2. Réponses: 3
    Dernier message: 29/04/2014, 12h25
  3. Réponses: 54
    Dernier message: 29/09/2010, 09h06
  4. TEXT-ALIGN dans Google Chrome
    Par Aquellito dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 23/09/2010, 21h28
  5. [XML] Imbrication balises/texte
    Par bourbaki2003 dans le forum XML/XSL et SOAP
    Réponses: 3
    Dernier message: 10/11/2004, 18h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo