宽度/高度的SVG在IE9/10/11上无法缩放

Question

有一个与IE 9/10/11:如果你有一个SVG文件,其中一个已知的问题<svg>元素指定的宽度和高度,然后使用缩放SVG图像width和height一个属性<img>标签,IE不正确缩放图像.

我遇到过这个问题.我有一系列SVG标志图标.对于US标志图标,SVG对象写为:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640">

<!-- elements to draw flag .. -->

</svg>

这是SVG的完整资源.

我将SVG插入带有<img>标记的HTML文档中,并将其缩小到20x15:

在Chrome 39上,SVG正确呈现如下:

但在IE10上,它呈现如下:

所以,这里似乎发生的事情是,即使IE10将<img>元素的大小调整为20x15,它也不会缩小SVG的大小 - 所以我们最终只能看到标志图标的左上角,它看起来像一个纯蓝色的盒子.

好的......所以这似乎是一个已知问题,有文档化的解决方案.一种解决方案是简单地删除SVG文件中的所有width和height属性.这似乎有点危险,因为我不想搞砸实际的设计.如果你有很多SVG文件,这也有点麻烦 - 需要更多脚本来处理文件.

一个更好的解决方案是使用CSS专门针对IE10中的SVG元素,显然可以使用供应商特定的媒体查询:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

好的,但我不明白这个解决方案.当我尝试上述操作时,IE10只是扩展了SVG的大小来填充整个父容器,这不是我想要的.好吧,也许我可以通过将SVG宽度设置为100%来强制IE扩展SVG,但随后约束父容器的大小.所以我把它包裹<img>在宽度和高度为20x15的DIV中.但是......这只会导致与以前相同的问题:容器DIV固定为20x15,但SVG不会缩小 - 所以我们最终得到的是标志的左上角,如前所述:

......所以,我可能只是不了解这个解决方案.如何让IE10/11将标志图标缩小到20x15？

Answer 1

当您的图像缺少元素viewBox上的属性时会发生这种情况svg.

你应该设置为:0 0 640 480.零是X和Y偏移,640和480对应于宽度和高度.它定义了一个表示图像边界的矩形.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">

Answer 2

从SVG标记线中取出高度和宽度.

当指定viewBox,width和height属性时,IE9,IE10和IE11无法正确缩放添加了img标记的SVG文件.

只需widthheight删除和属性并通过CSS操作它们就可以解决该问题.

img[src*=".svg"] {
  width: 100%; 
}