SVG 在 IE 中无法正确呈现

Question

我在我正在处理的站点中使用多边形背景，无论您如何调整它的大小，我都希望高度保持在 400 像素，角度保持在 7%。我使用以下代码得到了这个：

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

我使用它的诀窍是让它悬在屏幕边缘（最大 4000 像素），希望他们永远不会制造那么宽的显示器。

我运行遇到的问题是，它在 Chrome、Firefox 和 Edge 中呈现完美，但在 IE 中出现问题。它似乎缩放多边形以适合那里的屏幕。有人知道解决这个 IE 兼容性问题的方法吗？

JS Fiddle: https://jsfiddle.net/z81cxyjw/ 在 IE & Chrome 中比较以下内容以了解我的意思

Answer 1

来自 MDN 关于 viewBox 的内容：

The value of the viewBox attribute is a list of four numbers min-x, min-y, width and height, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute preserveAspectRatio.

显然 IE 在确定视口方面存在问题。添加 height 属性 and/or 指定 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>

SVG 在 IE 中无法正确呈现

SVG not rendering correcly in IE

html

internet-explorer

svg

polygon