html – 宽度/高度的SVG在IE9 / 10/11上不缩放

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

我遇到这个问题.我有一系列SVG标志图标.对于美国国旗图标,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>

And here’s the full source for the SVG.

我将SVG插入到具有< img>标签,并将其缩小到20×15:

在Chrome 39上,SVG的渲染方式如下:

但是在IE10上,它呈现如下:

所以,这里似乎发生的一个事情是,即使IE10的尺寸为< img>元素到20×15,它不会缩小SVG – 所以我们最终只看到标志图标的左上角,它显示为一个纯蓝色的框.

好的,所以这似乎是documented solutions的已知问题.一个解决方案是简单地删除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的大小来填充整个父容器,这不是我想要的.好的,也许我可以强制IE通过将SVG宽度设置为100%来缩放SVG,但是约束父容器的大小.所以我把< img>在宽度和高度为20×15的DIV中.但是,刚刚导致与以前相同的问题:容器DIV固定在20×15,但SVG不缩小 – 所以我们最终得到的是标记的左上角的蓝色角落,如前所述:

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

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

您应该设置为: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">
相关文章
相关标签/搜索