IE9中的SVG调整大小 [英] SVG resizing in IE9

问题描述

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

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.

但是，在IE9中，图像要小得多，并且不会调整大小.取下viewBox会将图像缩放到完整尺寸，该尺寸太大，并且仍然无法调整大小.

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.

我发现通过设置包含div的宽度和高度可以使图像变大，但只能使用固定像素而不是100％，这正是我所需要的.

I've found that by setting the width and height of the containing div will make the image larger, but only with fixed pixels, rather than 100%, which is what I need.

此jsfiddle 显示了实际存在的问题(例如，在Chrome中效果很好，在IE9中效果不佳).调整边框的大小应该可以调整图像的大小.

This jsfiddle shows the problem in action (i.e. it's fine in Chrome, and not fine in IE9). Resizing the frame borders should make the image resize.

<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>

推荐答案

我尚未在IE中对此进行测试，但是如果您要使用100％的宽度和高度，那么我想您要么希望它为全屏"或放入容器中.由于您还提到过，当...时，它可以正确缩放.

I haven't tested this in IE yet but if you're looking to use 100% width and height the I assume you either want it to be 'fullscreen' or to fit within a container. Since you also mentioned that it scales correctly when...

设置包含div的宽度和高度会使图像变大，但只能使用固定像素

setting the width and height of the containing div will make the image larger, but only with fixed pixels

...然后您可以使用JS.例如，使用jQuery，您可以执行以下操作:

...then you can use JS for this. With jQuery, for example, you can do the following:

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

这是假定您希望#outer容器是调整窗口大小时的窗口宽度和高度.

This is assuming that you want your #outer container to be the width and height of the window when the window is resized.

这篇关于IE9中的SVG调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！