SVG ne pas prendre toute la largeur sur Internet Explorer

Question

Je suis en train de charger la carte SVG en utilisant JQuery Ajax dans mon site qui fonctionne bien sur tous les navigateurs sauf Internet Explorer. il ne prend pas toute la largeur dans Internet Explorer, j'ai essayé d'ajouter 100% de largeur en utilisant CSS, mais cela n'a pas fonctionné.

J'ai joint la vue SVG ci-dessous sur différents navigateurs et le code SVG pour une meilleure compréhension.

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     viewBox="-279 414.72 35.58 13.17" style="enable-background:new -279 
     414.72 35.58 13.17;"xml:space="preserve"> 
     ....</svg> 

Merci

Answer 1

Je suppose que vous avez chargé votre SVG dans une balise d'image, et ne ciblent pas correctement avec CSS.

Cette cible les toutes les balises avec src qui se termine par ".svg" dans IE10 et IE11: de Fix SVG in tags not scaling in IE9, IE10, IE11 via caniuse.com

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: 
none) { 
img[src$=".svg"] { 
    width: 100%; 
} 
} 

IE ne respecte pas les ratios d'images SVG dans les balises mises en page fluides. Tous les autres navigateurs mettent à l'échelle les images SVG comme prévu.

Answer 2

La chose avec Internet Explorer est qu'il nécessite un hauteur en pixels pour fonctionner. Si vous mettez une image svg normale et que vous voulez faire « répondre », vous devez travailler avec des pourcentages:

<div id="some_div"> 
    <svg id="my_svg">...</svg> 
</div> 

<style> 
    #my_svg { 
     max-width: 500px; /*--- just added this to limit the width ---*/ 
     width: 100%; 
     height: auto; /*--- or you can even avoid putting the "height"---*/ 
    } 
</style> 

Le code fonctionnera bien dans la plupart des navigateurs, mais IE ne saura pas la taille cela rendra l'image très petite. Vous devez déclarer la hauteur de votre image:

<style> 
    #my_svg { 
     max-width: 500px; 
     width: 100%; 
     height: 350px; /*--- supposing the height of you svg is 350px---*/ 
    } 
</style> 

De cette façon, votre image prendra la taille que vous cherchez. La seule mauvaise chose est que chaque fois que vous réduisez la taille du navigateur il y aura un "espace vide" autour de votre image, ceci parce que la largeur (100%) va changer mais la hauteur restera 350 pixels. Vous pouvez effacer ces espaces vides avec quelques @medias chaque fois que l'écran du navigateur réduit la taille:

<div id="some_div"> 
    <svg id="my_svg">...</svg> 
</div> 

<style> 
    #my_svg { 
     max-width: 500px; 
     width: 100%; 
     height: 350px; 
    } 
    @media (max-width: 1100px) { 
     #my_svg { 
     height: 250px; 
     } 
    } 
    @media (max-width: 900px) { 
     #my_svg { 
     height: 150px; 
     } 
    } 
    ... 
</style>