SVG nicht korrekt in IE

Question

Ich benutze einen Polygonhintergrund in einer Site, an der ich arbeite, wo ich möchte, dass die Höhe bei 400px bleibt und der Winkel bei 7% bleibt, unabhängig davon, wie Sie die Größe ändern. Ich habe dies mit dem folgenden Code arbeiten:

<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> 

Der Trick, dass ich es mit machte es den Rand des Bildschirms hängt ab (out zu 4000px) und hoffte, dass sie noch nie so breit einen Monitor machen.

Das Problem, das ich renne ist, dass dies perfekt in Chrome, Firefox und Edge, aber bricht in IE. Es scheint das Polygon so zu skalieren, dass es auf den Bildschirm passt. Wer weiß etwas, um dieses IE-Kompatibilitätsproblem zu beheben?

JS Fiddle: https://jsfiddle.net/z81cxyjw/ Vergleichen Sie die folgenden in IE & Chrome zu sehen, was ich meine

Answer 1

Von MDN über viewBox:

Der Wert des viewBox Attribut eine Liste von vier ist Zahlen min-x, min-y, width und height, getrennt durch Leerzeichen und/oder ein Komma, die ein Rechteck im Benutzerraum angeben, das auf die Grenzen des Ansichtsfensters festgelegt werden soll Das gegebene Element, unter Berücksichtigung des Attributs preserveAspectRatio.

Anscheinend IE hat Problem mit dem Ausrechnen des Ansichtsfensters. Add height Eigenschaft und/oder spezifizieren viewPort Eigentum - das funktioniert zumindest in IE11, habe ich nicht in anderen Versionen überprüft.

<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>