11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Carte svg responsive - problème de height dans IE

Bonsoir,

Je cherche depuis quelques temps à solutionner mon problème et je me demandais si vous pouviez m'aider.
J'ai une carte de France qui permet d'afficher des infos au survol.
J'utilise le script "raphael.js" qui permet de ne pas réinventer la roue, c'est bien ce genre de résultat que je souhaite.
Pour qu'elle soit compatible sur différents supports, j'utilise le width et le height à 100% et je déclare un setViewBox avec un width et un height en pixel.
Cela fonctionne presque sur tous les navigateurs, sauf IE qui ne détecte pas de height et m'affiche donc une hauteur par défaut de 150px.. et carte est écrasée. Smiley sweatdrop

J'ai lu pas mal sur le sujet et testé pas mal de choses mais sans succès car il est souvent question des anciennes versions d'IE (modifier en mettant un padding-bottom à 100%, jouer sur le preserveAspectRatio..). Mon bug est visible la dernière version d'IE.
Le pire c'est que je passe par miscrosft remote desktop pour visualiser le résultat dans IE et qu'il me l'affiche très bien Smiley eek
J'ai vu le bug uniquement sur une véritable version de IE dans windows.

Connaissez-vous la solution à ce problème?
Merci de votre aide.

Je mets une mini carte pour que le code reste léger:

<!DOCTYPE html> 
<html lang="fr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
    <meta charset="UTF-8">
    <style type="text/css">
    #info{
      overflow: auto;
    }
    .displayNone{
      display: none;
    }
    </style>
  <script type="text/javascript" charset="utf-8">
    window.onload = function () {      
          var paper = Raphael(wrap, "100%", "100%");
          paper.setViewBox(0, 0, 160, 160, true);
          paper.canvas.setAttribute('preserveAspectRatio', 'none');
          var attr = {fill: "black", stroke: "#fff", "stroke-width": 1,"stroke-linejoin": "round" };
          var gr = {};      
          gr.departement75 = paper.path("M94.7979,48.1255l-17.1147,0.2124l-7.6069,3.3799l-3.1689,4.2261     l-6.9736,0.4224l-6.3379,7.1851l0.21,4.0146l1.48,4.6484l10.564,2.9575l12.8892,6.5503l8.2402,0.4224l5.4951-1.4785     l5.7046-4.0156l1.9014,1.6904l12.2544,1.6914l2.1138-4.4375v-4.4375l-2.1138-0.8457l-8.4517,0.4229l0.6343,2.1133l-1.4785,1.2686     h-2.7466l1.0557-2.7471l0.4229-2.9595h-0.4229l-1.0557-11.8315L94.7979,48.1255z ").attr(attr);
          gr.departement75 .attr({title: 'Ile de France',href:""});
          gr.departement94 = paper.path("M112.7573,63.1279l-5.4927,4.438l-5.4941,0.8438l-0.4229,2.9595     l-1.0557,2.7471h2.7466l1.4785-1.2686l-0.6343-2.1133l8.4517-0.4229l2.1138,0.8457v4.4375l-2.1138,4.4375l-12.2544-1.6914     l-1.9014-1.6904l-5.7046,4.0156l-5.4951,1.4785l-7.8179-0.4224l-2.3247,8.2397l2.1143,3.5933l-3.3804,9.9316l3.3804,6.3379     l5.9165-2.9585l14.1563,7.8179h24.5107l14.5786,6.7622l-0.2109-1.4795l10.3535-25.9888V82.1445l-6.5493-1.6899l-1.6909-3.1694     l-2.7471-1.2686l-5.916-6.5493l-10.353-5.916L112.7573,63.1279z ").attr(attr);
          gr.departement94 .attr({title: 'Val de Marne',href:""});
          gr.departement93 = paper.path("M142.1289,5.8667l-12.4668,8.8755l-19.4385,8.8735L74.7251,25.939     l1.0557,4.8608l2.958,0.6338l2.7466,4.2251l-2.7466,5.9165l-3.5918,0.6343l2.5361,6.1284l17.1147-0.2124l5.4941,8.4526     l1.0557,11.8315l5.917-0.8438l5.4927-4.438l8.2417,0.4233l10.353,5.916l5.916,6.5493l2.7471,1.2686l1.6909,3.1694l6.5493,1.6899     V62.917l-7.8169-46.4854L142.1289,5.8667z ").attr(attr);
          gr.departement93 .attr({title: 'Seine Saint Denis',href:""});
          gr.departement92 = paper.path("M74.7251,25.939l-23.667,12.6787l-2.5342,0.4229l-11.6216,25.355     l7.396,20.0723l11.8315,13.312v1.48l18.3838,12.8892l4.437-2.3242l-3.3804-6.3379l3.3804-9.9316l-2.1143-3.5933l2.3247-8.2397     h-0.4224l-12.8892-6.5503l-10.564-2.9575l-1.48-4.6484l-0.21-4.0146l6.3379-7.1851l6.9736-0.4224l3.1689-4.2261l7.6069-3.3799     l-2.5361-6.1284l3.5918-0.6343l2.7466-5.9165l-2.7466-4.2251l-2.958-0.6338L74.7251,25.939z ").attr(attr);
          gr.departement92 .attr({title: 'Hauts de Seine',href:""});

          var current = null;
          for (var state in gr) {
            gr[state].color = "red";
            (function (st, state) {
              st[0].style.cursor = "pointer";
              st[0].onmouseover = function () {
                current && gr[current].animate({fill: "black", stroke: "#fff"}, 100) && (document.getElementById(current).style.display = "");
                st.animate({fill: st.color, stroke: "#fff"}, 100);
                st.toFront();
                paper.safari();
                document.getElementById(state).style.display = "block";
                current = state;
              };
              st[0].onmouseout = function () {
                st.animate({fill: "black", stroke: "#fff"}, 300) && (document.getElementById(current).style.display = "block");
                st.toFront();
                paper.safari();
              };
            })(gr[state], state);
          }
    };
  </script>
  </head>
  <body>
      <!--wrap contenant le svg-->
    	<div id="wrap" ></div> 
      <div id="info">
        <div id="departement75" class="displayNone">info dept 75</div> 
        <div id="departement92" class="displayNone">info dept 92</div> 
        <div id="departement93" class="displayNone">info dept 93</div> 
        <div id="departement94" class="displayNone">info dept 94</div>
      </div> 
  	<script src="raphael_2.0.2.js" type="text/javascript" charset="utf-8"></script>
	</body>
	</html>


Bonne soirée.
Modifié par zebrilee (15 Mar 2015 - 22:34)
Bonsoir,

J'ai fini par trouver une solution.
Si toutefois ça peut aider:
Déjà sur ce site, problème et solution sont très bien expliqués.
Ensuite le Raphael.js peut poser problème car il impose certaines déclarations.

Dans mon cas je m'en suis finalement passé. J'ai pris le temps de mieux comprendre l'utilisation du svg pour bien le déclarer et j'ai créé une petite fonction pour le survol.
La carte se resize parfaitement.
Je pense que vous avez opté pour le bon compromis : moi aussi j'utilisais Raphael.js auparavant, j'avais des bugs au survol avec Opéra sans comprendre réellement le fonctionnement. Maintenant, le SVG est très bien supporté par la plupart des navigateurs, et c'est tant mieux pour ce standard destiné à une longue vie.
Sujet clos
Aller à