SVG 图像在 ie 中没有获得视口的全宽

Posted 2023-03-06

【中文标题】SVG 图像在 ie 中没有获得视口的全宽

【英文标题】：SVG images not getting full width of viewport in ie

【发布时间】：2021-03-24 20:56:52

【问题描述】：

我正在使用带有内联图像的 SVG 图像，并且在 Internet Explorer 之外的其他浏览器中运行良好。在即它显示最小尺寸但实际图像是屏幕的 100% 宽度，下面是我的 SVG 代码

<code>
 <section class="position-relative d-flex">
    <svg
        class="d-none d-lg-block"
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
 
        viewBox="0 0 1920 1519">

<image   xlink:href="./images/-image.png"/>
                
               
                
              <a href="#">
<image   transform="translate(974 1325)" xlink:href="./images/-image2.png"/>
</a>
              <a href="#"> 
<image   transform="translate(591 655)" xlink:href="./images/-image3.png"/>
</a>
              <a href="#">
<image   transform="translate(594 1325)" xlink:href="./images/-image4.png"/>
</a>
</svg>
</section>
</code>



I tried this css from and answer in this site, this also not working for me.

only when I give some fix height and width only its  showing bigger size I want to use 100% width and make svg adjusting like its showing in other browsers 

尝试使用 jquery 方式获取视口的宽度并将其添加到 svg 然后也无法正常工作。

 <code>
     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
          img
            flex: 0 0 auto;  /* IE */
        object-fit: scale-down; /* FF */
        flex: 1;
        width: 100vw; 
            max-height: 100%;
          
        
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
          svg 
            width: 100vw; 
          
        

</code>


if anyone could suggest a way to make this SVG showing full screen in ie it would be very helpful.

【问题讨论】：

IE 根本不支持vw units。

@RobertLongson 你能为此提出任何解决方案吗

当然，重写你的解决方案不要使用 IE 不支持的单位。

【参考方案1】：

我可以看到您已经在svg 中添加了viewbox。

除此之外，我建议您添加width="1920" height="1519" 而不是width="100%" height=""。

IE 浏览器将提供与其他浏览器类似的输出。

修改代码：

<section class="position-relative d-flex">
   <svg
      class="d-none d-lg-block"
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink" 
       
      viewBox="0 0 1920 1519">
      <image   xlink:href="./images/-image.png"/>
      <a href="#">
         <image   transform="translate(974 1325)" xlink:href="./images/-image2.png"/>
      </a>
      <a href="#">
         <image   transform="translate(591 655)" xlink:href="./images/-image3.png"/>
      </a>
      <a href="#">
         <image   transform="translate(594 1325)" xlink:href="./images/-image4.png"/>
      </a>
   </svg>
</section>

在 IE 11 浏览器中的输出：