IE9/10/11有一个已知的问题,如果您有一个SVG文件,其中的<svg>
元素指定了宽度和高度,然后您使用<img>
标记的width
和height
属性缩放了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>
标记的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?
发布于 2015-01-16 03:51:21
当您的图像缺少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">
发布于 2015-01-16 03:02:33
将高度和宽度从SVG标记行中去掉。
当指定了viewBox、宽度和高度属性时,IE9、IE10和IE11不能正确缩放添加了img标签的SVG文件。
这个问题可以通过仅删除width
height
和 CSS attributes并仅通过CSS操作它们来解决。
img[src*=".svg"] {
width: 100%;
}
备注:如果您将SVG内联放置在IE11中,则需要在SVG标记中使用宽度和高度属性,同时使用CSS将SVG标记的宽度设置为100%,以便正确缩放。
发布于 2016-02-04 20:55:05
下面是我为解决同样的问题而编写的节点脚本(对于包含大量SVG的文件夹),也许它会对某些人有所帮助:
'use strict'
const fs = require('fs')
fs.readdir(`./`, (err, flist) => {
if (typeof flist != 'undefined') {
flist.forEach((file, i) => {
proceed(file)
})
}
})
function proceed(file){
fs.readFile(`./${file}`, 'utf8', (err,svg) => {
let out = svg.replace('<svg', '<svg viewBox="0 0 640 480" ')
if (!svg.includes('viewBox')){
fs.writeFile(file, out, err => {
if(err) {
console.log(err);
} else {
console.log("Saved: " + file);
}
})
}
})
}
https://stackoverflow.com/questions/27970520
复制相似问题