html – 宽度高度的SVG在IE91011上不缩放

概述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/ 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">

总结

以上是内存溢出为你收集整理的html – 宽度/高度的SVG在IE9 / 10/11上不缩放全部内容，希望文章能够帮你解决html – 宽度/高度的SVG在IE9 / 10/11上不缩放所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。