jquery - SVG 在 Internet Explorer 上没有全宽

Question

我在我的网站上使用 JQuery Ajax 加载 SVG map ，它在除 Internet Explorer 之外的所有浏览器上都运行良好。它在 Internet Explorer 中没有占满宽度，我尝试使用 CSS 将宽度增加 100%，但没有成功。

为了更好地理解，我在下面附上了不同浏览器上的 SVG View 和 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>

谢谢

Answer 1

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>