我在一个div中嵌入了一个内联SVG元素,它可以缩放以适应浏览器窗口。当浏览器大小改变时,SVG图像会随之调整大小,以使所有图像可见,并保持相同的比例。
然而,在IE9中,图像要小得多,并且不会调整大小。去掉viewBox会将图像缩放到完整尺寸,但太大了,而且仍然无法调整大小。
我发现通过设置包含div的宽度和高度可以使图像变大,但只能使用固定像素,而不能使用我需要的100%。 这个jsfiddle展示了问题的实际情况(即在Chrome中正常,在IE9中不正常)。调整框架边框大小应该会使图像调整大小。
然而,在IE9中,图像要小得多,并且不会调整大小。去掉viewBox会将图像缩放到完整尺寸,但太大了,而且仍然无法调整大小。
我发现通过设置包含div的宽度和高度可以使图像变大,但只能使用固定像素,而不能使用我需要的100%。 这个jsfiddle展示了问题的实际情况(即在Chrome中正常,在IE9中不正常)。调整框架边框大小应该会使图像调整大小。
<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>
</div>