带有宽/高的SVG在IE9/10/11上不能缩放
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？
回答 5
Stack Overflow用户
发布于 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">Stack Overflow用户
发布于 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%，以便正确缩放。
Stack Overflow用户
发布于 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
复制相似问题