Css IE9中SVG的大小调整
我在一个div中有一个内联SVG元素，它可以根据浏览器窗口进行缩放。调整浏览器大小时，SVG图像将随之调整大小，以便所有图像都可见，并保持相同的比例 然而，在IE9中，图像要小得多，并且不会调整大小。取下viewBox会将图像缩放到全尺寸，这太大了，但仍然无法调整大小 我发现通过设置包含div的宽度和高度可以使图像变大，但只能使用固定像素，而不是我需要的100% 显示实际存在的问题（即，在Chrome中没有问题，而在IE9中没有问题）。调整帧边框的大小会使图像调整大小Css IE9中SVG的大小调整,css,svg,internet-explorer-9,Css,Svg,Internet Explorer 9,我在一个div中有一个内联SVG元素，它可以根据浏览器窗口进行缩放。调整浏览器大小时，SVG图像将随之调整大小，以便所有图像都可见，并保持相同的比例 然而，在IE9中，图像要小得多，并且不会调整大小。取下viewBox会将图像缩放到全尺寸，这太大了，但仍然无法调整大小 我发现通过设置包含div的宽度和高度可以使图像变大，但只能使用固定像素，而不是我需要的100% 显示实际存在的问题（即，在Chrome中没有问题，而在IE9中没有问题）。调整帧边框的大小会使图像调整大小 <div id="o
<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>
抛
var container = this.$('.container'),
width = container.width(),
scale = svg.width / width;
container.height(parseInt(svg.height / scale, 10));
其中svg.width和svg.height是我知道的svg原始宽度和高度的值。我还没有在IE中测试过这一点，但如果您希望使用100%宽度和高度，我假设您希望它是“全屏”或适合容器。因为你也提到了当 设置包含div的宽度和高度将使图像变大，但只能使用固定像素 …然后您可以使用JS进行此操作。例如，使用jQuery，您可以执行以下操作：
$(window).resize(function()
{
$('#outer').css({
width: $(window).width() + 'px',
height: $(window).height() + 'px'
})
});
这是假设在调整窗口大小时，您希望您的
#outer