在 IE11 中调整 SVG 大小答案

【问题标题】：SVG resizing in IE11在 IE11 中调整 SVG 大小
【发布时间】：2014-08-11 13:24:00
【问题描述】：

我正在研究 IE11 中的一个奇怪行为，并遇到了这个问题，但对于 IE9：

我在 div 中有一个内联 SVG 元素，它可以缩放以适应浏览器窗口。当浏览器调整大小时，SVG 图像也会随之调整大小，以便所有图像都可见，并且保持相同的比例。*

但是，在 IE9 中，图像要小得多，并且不会调整大小。取下 viewBox 将图像缩放到全尺寸，太大了，它仍然没有调整大小。

这个问题可以在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 方法来解决这个问题？

【问题讨论】：

自上一个问题与 IE9 相关以来，这是 IE11 中的问题吗？如果是这样，请说明您的问题是什么。
是的，我的问题是一样的，在 IE9 中没有解决，在 IE11 中仍然没有解决 afaik。我想知道在这 2 年内是否有人为 IE11 解决了这个问题。更新了问题以澄清。

标签： css svg resize

【解决方案1】：

我的一位客户遇到了类似的问题。所以，清单：-

window.onresize 触发了吗？
您是否能够阅读新的window.innerHeight 和window.innerWidth？

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

Sideline：出于好奇，这看起来像是模拟足球比赛？

【讨论】：

注意：如果有人能以 non-JS 的方式解决它，我会全力以赴。
谢谢，我们打算用js的方式来解决这个问题，但更愿意找非js的方式。 JSfiddle 是从上一个针对 IE9 的问题的提问者中重新使用的，所以这不是我的。我们正在制作一个在线乐谱阅读器:-)