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 に答える