5

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

但是，在 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>
4

2 回答 2

2

我尚未在 IE 中对此进行测试，但如果您希望使用 100% 的宽度和高度，我假设您希望它是“全屏”或适合容器。由于您还提到它在...时正确缩放

设置包含 div 的宽度和高度会使图像变大，但仅限于固定像素

...那么您可以为此使用JS。例如，使用 jQuery，您可以执行以下操作：

$(window).resize(function()
{
    $('#outer').css({
        width: $(window).width() + 'px',
        height: $(window).height() + 'px'
    })
});

这是假设您希望您的#outer容器在调整窗口大小时成为窗口的宽度和高度。

于 2012-08-07T09:17:37.660 回答
0

我知道你说过你想避免设置宽度和高度，但这是我个人设法让它工作的唯一方法。

虽然我确实发现您只需要设置高度，但您可以将宽度保留为 100%，因此：

        var container = this.$('.container'),
            width = container.width(),
            scale = svg.width / width;

        container.height(parseInt(svg.height / scale, 10));

其中 svg.width 和 svg.height 是我知道是 SVG 的原始宽度和高度的值。

于 2012-08-07T09:17:19.217 回答