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？
