SVG在IE中没有正确渲染

我正在使用一个多边形背景，在我正在工作的地方，我希望高度保持在400px，角度保持在7％，无论您如何调整大小。我得到这个工作用下面的代码：SVG在IE中没有正确渲染

<div style="width:100%;max-width:100%;margin-top:-0px;position:absolute;top:40px;overflow:hidden;background-color:rgba(155,0,0,0);"> 
    <div style="position:relative"> 
     <div id="backgroundImage1" style="overflow:hidden;"> 
      <svg width="4000" viewBox="0 0 4000 1200" preserveAspectRatio="none"> 

       <polygon points="0,0 0,400 4000,900 4000,500" style="fill:#525252;stroke:#525252;stroke-width:0;" /> 
      </svg> 
     </div> 
    </div> 
</div>

，我使用它使它挂关闭屏幕的边缘（出4000px）的技巧，希望他们永远做一个监视器宽。

我遇到的问题是，它在Chrome，Firefox和Edge中完美呈现，但在IE中中断。它似乎缩放多边形以适应屏幕。任何人都知道一些解决这个IE兼容性问题？

JS小提琴： https://jsfiddle.net/z81cxyjw/ 比较在IE &铬下面来看看我的意思

来源

2017-02-09 JonD

从MDN约视框：

viewBox属性的值是四个列表由空格和/或逗号分隔的数字min-x，min-y，width和height，用户空间中指定一个矩形，该矩形应映射到由第给定元素，考虑属性preserveAspectRatio。

显然IE浏览器在计算视口时有问题。添加height属性和/或指定viewPort属性 - 这项工作至少在IE11中，我没有检查过其他版本。

<div style="width:100%;max-width:100%;margin-top:-0px;position:absolute;top:40px;overflow:hidden;background-color:rgba(155,0,0,0);"> 
 
     <div style="position:relative"> 
 
      <div id="backgroundImage1" style="overflow:hidden;"> 
 
       <svg width="4000" height="1200" viewPort="0 0 4000 1200" preserveAspectRatio="none"> 
 
        
 
        <polygon points="0,0 0,400 4000,900 4000,500" style="fill:#525252;stroke:#525252;stroke-width:0;" /> 
 
       </svg> 
 
      </div> 
 
     </div> 
 
    </div>

来源

2017-02-10 08:06:58 barbsan

非常赞赏。完美解决了兼容性问题！ – JonD

SVG在IE中没有正确渲染

回答

相关问题