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中沒有正確渲染

回答

相關問題