Html 具有宽度/高度的 SVG 在 IE9/10/11 上无法缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27970520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG with width/height doesn't scale on IE9/10/11
提问by Siler
There's a known issue with IE 9/10/11 where if you have an SVG file where the <svg>element specifies a width and height, and then you scale the SVG image using the widthand heightattributes of an <img>tag, IE doesn't properly scale the image.
IE 9/10/11 存在一个已知问题，如果您有一个 SVG 文件，其中<svg>元素指定了宽度和高度，然后您使用标签的width和height属性缩放 SVG 图像<img>，IE 无法正确缩放图像.
I've run into this issue. I have a series of SVG flag icons. For the US flag icon, the SVG object is written as:
我遇到了这个问题。我有一系列 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.
I insert the SVG into an HTML document with an <img>tag, and down-scale it to 20x15:
我将 SVG 插入带有<img>标签的 HTML 文档中，并将其缩小到 20x15：
On Chrome 39, the SVG is rendered properly like so:
在 Chrome 39 上，SVG 正确呈现如下：
But on IE10, it renders as follows:
但是在 IE10 上，它呈现如下：
So, what seems to be happening here is that even though IE10 sizes the <img>element to 20x15, it doesn't downscale the SVG - so we end up seeing just the top-left corner of the flag icon, which appears as a plain blue box.
所以，这里似乎发生的事情是，即使 IE10 将<img>元素的大小调整为 20x15，它也不会缩小 SVG - 所以我们最终只看到标志图标的左上角，它显示为一个纯蓝色框.
Okay... so this seems to be a known issue with documented solutions. One solution is to simply remove all the widthand heightattributes in the SVG file. This seems a bit dangerous as I don't want to screw up the actual designs. It's also a bit cumbersome to do if you have a lot of SVG files - requiring more scripts to process the files.
好的......所以这似乎是一个已知的问题，有记录的解决方案。一种解决方案是简单地删除SVG 文件中的所有width和height属性。这似乎有点危险，因为我不想搞砸实际的设计。如果您有很多 SVG 文件，这样做也有点麻烦——需要更多的脚本来处理这些文件。
A nicer solution is to use CSS to specifically target SVG elements in IE10, which apparently is possible using a vendor specific media query:
更好的解决方案是使用 CSS 专门针对 IE10 中的 SVG 元素，这显然可以使用供应商特定的媒体查询：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
width: 100%;
}
}
Okay, but I don't understand this solution. When I try the above, IE10 simply expands the size of the SVG to fill the entire parent container, which isn't what I want. Okay, so maybe I can force IE to scale the SVG by setting the SVG width to 100%, but then constraining the size of the parent container. So I wrapped the <img>in a DIV with a width and height of 20x15. But... that just resulted in the same problem as before: the container DIV is fixed at 20x15, but the SVG doesn't shrink - so all we end up with is the top-left blue corner of the flag as before:
好的，但我不明白这个解决方案。当我尝试上述操作时，IE10 只是将 SVG 的大小扩展以填充整个父容器，这不是我想要的。好的，所以也许我可以通过将 SVG 宽度设置为 100% 来强制 IE 缩放 SVG，然后限制父容器的大小。所以我把它包裹<img>在一个宽度和高度为 20x15 的 DIV 中。但是……这只是导致了与以前相同的问题：容器 DIV 固定为 20x15，但 SVG 没有缩小 - 所以我们最终得到的只是标志的左上角蓝色和以前一样：
... so, I'm probably just not understanding something about this solution. How can I get IE10/11 to scale the flag icon down to 20x15?
...所以，我可能只是不了解有关此解决方案的某些内容。如何让 IE10/11 将标志图标缩小到 20x15？
回答by Josiah Keller
This happens when your image is missing the viewBoxattribute on the svgelement.
当您的图像缺少元素viewBox上的属性时，就会发生这种情况svg。
Yours should be set to: 0 0 640 480. The zeros are X and Y offsets and the 640 and 480 correspond to the width and height. It defines a rectangle that represents the boundaries of the image.
你的应该设置为：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">
回答by rfornal
Take the height and width out of the SVG tag line.
从 SVG 标记行中取出高度和宽度。
IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified.
当指定了 viewBox、width 和 height 属性时，IE9、IE10 和 IE11 无法正确缩放添加了 img 标签的 SVG 文件。
The issue can be resolved by removing just the widthand heightattributesand manipulate them via CSS only.
该问题可以通过仅widthheight删除和属性并仅通过 CSS 操作它们来解决。
img[src*=".svg"] {
width: 100%;
}
Note: If you are placing the SVG inline in IE11, then the width and height attributes are needed in the SVG tag, along with setting the width of the SVG tag to 100% using CSS, so that it scales correctly.
注意：如果您在 IE11 中放置 SVG 内联，则需要在 SVG 标签中设置 width 和 height 属性，同时使用 CSS 将 SVG 标签的宽度设置为 100%，以便正确缩放。
回答by Darwin
here is the node script i had to write to fix the same issue (for the folder with a number of SVG's), maybe it will be helpful for someone:
这是我必须编写的节点脚本来解决相同的问题（对于包含多个 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);
}
})
}
})
}
回答by Benjamin Frugoni
Look @ this flag from wonderflags for your answer, you need to set viewbox="0 0 640 480" or it won't work. (EU Flag)
从wonderflags 中查看@ this flag 以获得答案，您需要设置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>
