宽度/高度的SVG在IE9 / 10/11上不会缩放

Question

IE 9/10/11存在一个已知问题，如果你有一个SVG文件，其中<svg>元素指定了宽度和高度，然后使用{{1来缩放SVG图像width标记的{}和height属性，IE无法正确缩放图像。

我遇到过这个问题。我有一系列SVG标志图标。对于US标志图标，SVG对象写为：

<img>

And here's the full source for the 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> 标记的HTML文档中，然后将其缩小到20x15：

在Chrome 39上，SVG的呈现方式如下：

但在IE10上，它呈现如下：

所以，这里似乎发生的事情是，尽管IE10将<img>元素的大小调整为20x15，但它并没有缩小SVG的大小 - 所以我们最终只看到了左上角的标志图标，显示为纯蓝色框。

好的......所以这似乎是documented solutions的一个已知问题。一种解决方案是简单地删除SVG文件中的所有<img>和width属性。这似乎有点危险，因为我不想搞砸实际的设计。如果你有很多SVG文件，那么做起来也有点麻烦 - 需要更多脚本来处理文件。

一个更好的解决方案是使用CSS专门针对IE10中的SVG元素，显然可以使用供应商特定的媒体查询：

height

好的，但我不明白这个解决方案。当我尝试上述操作时，IE10只是扩展了SVG的大小来填充整个父容器，这不是我想要的。好吧，也许我可以通过将SVG宽度设置为100％来强制IE扩展SVG，但随后约束父容器的大小。所以我将@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { img[src*=".svg"] { width: 100%; } } 包裹在DIV中，宽度和高度为20x15。但是......这只会导致与以前相同的问题：容器DIV固定在20x15，但是SVG并没有缩小 - 所以我们最终得到的是标志的左上角，就像之前一样：

......所以，我可能只是对这个解决方案一无所知。如何让IE10 / 11将标志图标缩小到20x15？

Answer 1

当您的图片缺少viewBox元素上的svg属性时会发生这种情况。

您应该设置为：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">

Answer 2

从SVG标记行中取出高度和宽度。

当指定了viewBox，width和height属性时，IE9，IE10和IE11无法正确扩展使用img标记添加的SVG文件。

只需移除 width和height属性即可解决此问题，并仅通过CSS操作它们。

img[src*=".svg"] {
  width: 100%; 
}

注意：如果要将SVG内嵌在IE11中，则SVG标记中需要width和height属性，并使用CSS将SVG标记的宽度设置为100％，这样它就能正确缩放。

Answer 3

这是我必须编写的节点脚本来修复相同的问题（对于包含许多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);
                }
            }) 
        }
    })
}

Answer 4

使用带有boostrap img-fluid的嵌入式SVG遇到了很多麻烦。 SVG总是以错误的高度渲染。我用下面的代码来修复它。在IE10和IE11中进行了测试。

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        svg.img-fluid {
            position: absolute;
        }
    }

Answer 5

从wonderflags中查找@这个标志作为你的答案，你需要设置viewbox =“0 0 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"><defs><g id="d"><g id="b"><path d="M0-1l-.3 1h.5z" id="a"/><use transform="scale(-1 1)" xlink:href="#a"/></g><g id="c"><use transform="rotate(72)" xlink:href="#b"/><use transform="rotate(144)" xlink:href="#b"/></g><use transform="scale(-1 1)" xlink:href="#c"/></g></defs><path fill="#039" d="M0 0h640v480H0z"/><g transform="translate(320 242.263) scale(23.7037)" fill="#fc0"><use height="100%" width="100%" xlink:href="#d" y="-6"/><use height="100%" width="100%" xlink:href="#d" y="6"/><g id="e"><use height="100%" width="100%" xlink:href="#d" x="-6"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use height="100%" width="100%" xlink:href="#e" transform="scale(-1 1)"/></g></svg>