css - 在 IE11 中调整 SVG 大小

Question

我正在研究 IE11 中的一个奇怪行为，并遇到了这个具有确切问题的线程，但对于 IE9:

SVG resizing in IE9

I've got an inline SVG element inside a div, which scales to fit the browser window. When the browser is resized, the SVG image resizes with it, so that all the image is visible, and it keeps the same proportions.*

However, in IE9, the image is much smaller, and doesn't resize. Taking off the viewBox scales the image to the full size, which is too big, and it still doesn't resize.

问题可以看这个jsfiddle调整大小在 IE9 或 IE11 中无法正常工作。

<div id="outer">
<svg viewBox="0 0 700 1000"  xmlns=http://www.w3.org/2000/svg>
        <g transform="rotate(90, 350, 350)" id="pitch-rotated">
            <title>Pitch</title>
            <path d="m0,0l1000,0l0,700l-1000,0l0,-700z" stroke-width="5" stroke="#fff" fill="#008800" id="perimiter"/>
            <line id="centre-line" y2="700" x2="500" y1="0" x1="500" stroke-width="5" stroke="#ffffff" fill="none"/>
            <path id="penalty-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,148.5l165,0l0,403l-165,0l0,-403z"/>
            <path id="six-yard-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,258.5l55,0l0,183l-55,0l0,-183z"/>
            <path d="m1000,148.5l-165,0l0,403l165,0l0,-403z" stroke-width="5" stroke="#fff" fill="none" id="penalty-box-away"/>
            <path d="m1000,258.5l-55,0l0,183l55,0l0,-183z" stroke-width="5" stroke="#fff" fill="none" id="six-yard-box-away"/>
            <circle fill="none" stroke="#ffffff" stroke-width="5" cx="500" cy="350" r="95" id="centre-circle"/>
            <circle fill="none" stroke="#ffffff" stroke-width="10" cx="500" cy="350" r="1" id="centre-spot"/>
            <circle fill="none" stroke="#ffffff" stroke-width="7" cx="110" cy="350" r="1" id="penalty-spot-home"/>
            <circle fill="none" stroke="#ffffff" stroke-width="7" cx="890" cy="350" r="1" id="penalty-spot-away"/>
            <path d="m165,277.5a91,91 1 0 10,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-home"/>
            <path d="m835,277.5a91,91 0 0 00,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-away"/>
            <path d="m0,10a7.5,7.5 0 0 010,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-left"/>
            <path d="m0,690a7.5,7.5 0 0 110,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-right"/>
            <path d="m1000,10a7.5,7.5 0 0 1-10,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-left"/>
            <path d="m1000,690a7.5,7.5 0 0 0-10,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-right"/>
        </g>
</svg>      

所以我的问题是，即使在 IE11 中，是否仍然没有非 JS 方法来解决这个问题？

Answer 1

我的一位客户遇到了类似的问题。所以， list :-

1. window.onresize 是否触发？
2. 您能否阅读新的 window.innerHeight 和 window.innerWidth？

我所做的是为 SVG 编写缩放 slider 。用window.addEventListener("resize", .....)代码(谢谢 SO)，读取新的 height 和 width 值，计算正确的 Zoom。如果 .onresize 没有触发(偶尔发生在 every 浏览器上，超出我们的控制)，他们可以使用 slider 来修复它。

旁白:出于好奇，这看起来像是模拟足球比赛？