Question

我在我的网站上使用JQuery Ajax加载SVG地图，除了Internet Explorer之外，所有浏览器都能正常运行。它没有在Internet Explorer中占据全宽，我试图使用CSS增加100％的宽度，但没有工作。

我在不同的浏览器和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>

由于

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>

Answer 2

我想出了一种变通办法，它对我来说是有效的，并且避免了使用大量媒体查询的问题：

HTML

<div class='container'>
    <svg>
       ...
    </svg>
</div>

CSS

.container {
    height: 0;
    padding-top: 61%; (corresponding to the aspect ratio of your SVG)
    position: relative;
}    

svg {
   position: absolute;
   top: 0
   left: 0;
   height: 100%;
   width: 100%;
}

Answer 3

我假设您已将SVG加载到图片代码中，并且未使用CSS正确定位。

这会将每个标记的src定位在＆＃34; .svg＆＃34;在IE10和IE11中：从my answer到Fix SVG in tags not scaling in IE9, IE10, IE11

field-symbols: <fs_it_orignal> type any.

"-- Code here to assign your FS to something 

case replace( val   = cl_abap_typedescr=>describe_by_data( <fs_it_orignal> )->absolute_name
              regex = '\\TYPE='   with = '' ).
  when 'Z_STRUCT_A'.
    "-- Do what ever
  when 'Z_STRUCT_B'.
    "-- Do what ever
  when 'Z_STRUCT_C'.
    "-- Do what ever
endcase.

IE不考虑流体布局中标签内SVG图像的比例。所有其他浏览器按预期缩放SVG图像。

SVG没有在Internet Explorer上占据全宽

3 个答案: