IE 9/10/11存在一个已知问题,如果您有一个SVG文件,其中<svg>
元素指定宽度和高度,然后缩放使用<img>
标记的width
和height
属性的SVG图像,IE无法正确缩放图像。宽度/高度的SVG在IE9/10/11上不能缩放
我遇到了这个问题。我有一系列的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>
标记的HTML文档,向下缩放它20×15:对于美国国旗图标,如SVG对象写入
在Chrome 39中,SVG是正确地呈现,像这样:
但在IE10,它呈现如下:
那么,什么似乎是这里发生的是,即使IE10尺寸的<img>
元素20×15,它不会缩减的SVG - 所以我们最终只能看到标志图标的左上角,它显示为一个普通的蓝色框。
好吧...所以这似乎是documented solutions已知的问题。一种解决方案是简单地删除SVG文件中的所有width
和height
属性。这似乎有点危险,因为我不想搞砸实际的设计。如果你有很多的SVG文件,这也有点麻烦 - 需要更多的脚本来处理这些文件。
一个更好的解决方案是使用CSS专门针对SVG元素IE10,这显然是可以使用供应商特定媒体查询:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
width: 100%;
}
}
好,但我不明白这一点的解决方案。当我尝试以上时,IE10只是扩大了SVG的大小来填充整个父容器,这不是我想要的。好吧,也许我可以强制IE通过将SVG宽度设置为100%来缩放SVG,但是然后限制父容器的大小。因此,我将<img>
包装在宽度和高度均为20x15的DIV中。但是...导致了与之前相同的问题:容器DIV固定为20x15,但SVG不缩小 - 因此,我们最终得到的是该标志的左上角蓝色角落:
...所以,我可能只是没有理解这个解决方案的东西。我怎样才能让IE10/11将标志图标缩小到20x15?
谢谢 - 它解决了我的问题:) – MWD 2015-10-30 16:21:05
关于它有一篇很好的文章[https://css-tricks.com/scale-svg/],它涵盖了这里提到的两种技术,但是来自Josiah的技术应该工作 – Simon 2015-11-25 17:04:27