SVG没有在Internet Explorer上全宽

问题描述：

我正在使用JQuery Ajax在我的网站上加载SVG地图，该工具在除Internet Explorer之外的所有浏览器上工作正常。它没有在Internet Explorer中占满全部宽度，我试图使用CSS添加宽度100％，但没有工作。SVG没有在Internet Explorer上全宽

为了更好的理解，我在不同的浏览器和SVG代码上附加了以下SVG视图。

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

感谢

我们不能调试的图像，我们需要一个工作代码片段重现问题 – LGSon

答

我假设你已经加载了一个图像标签内的SVG和CSS使用不正确的目标。

此目标的每个标签与Src的是，在IE10“.SVG”结束，并且IE11：从Fix SVG in tags not scaling in IE9, IE10, IE11经由caniuse.com

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

IE不尊重内部流体布局标签SVG图像的比率。所有其他浏览器按预期缩放SVG图像。

答

与Internet Explorer的事情是，它需要一个高度像素工作。如果你把一个正常的SVG形象，你想让它“有求必应”，你需要用百分比工作：

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

的代码将工作在大多数浏览器罚款，但IE浏览器不知道大小所以它会使图像非常小。您需要声明图片的高度尺寸：

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

这样您的图片会占用您正在查看的尺寸。唯一不好的是，每次你缩小浏览器的大小时，图像周围都会有一个“空白区域”，这是因为宽度（100％）会改变，但高度将保持350像素。您可能要删除这些空格与每一个浏览器的屏幕减少了大小一些时间@medias：

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

SVG没有在Internet Explorer上全宽

相关推荐