SVG在IE9中调整大小

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

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

我发现通过设置包含div的宽度和高度将使图像更大，但只有固定像素，而不是100％，这是我需要的。

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

来源

2012-08-06 harriyott

我还没有在IE中测试过，但如果你想使用100％的宽度和高度，我假设你要么是'全屏'或以适应容器。既然你也提到，扩展正确时...

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

...那么你就可以为此使用JS。使用jQuery，例如，你可以做到以下几点：

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

这是假设你希望你的#outer容器是窗口的宽度和高度时，窗口大小。

来源

2012-08-07 09:17:37

嗨@艾哈迈德我有同样的问题，但我想尽可能避免JS解决方案。你有这样做的CSS方式？ – 2014-03-07 10:43:16

我知道你说你想避免设置宽度和高度，但是这是我已经成功地得到它的工作，个人的唯一途径。

虽然我没弄清楚，你只需要设置的高度，你可以在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-07 09:17:19 spmason

SVG在IE9中调整大小

回答

相关问题