CSS 在 ie9 中不遵守 img 元素比例中的 SVG
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9777143/
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 in img element proportions not respected in ie9
提问by Fresheyeball
CSS:
CSS：
img{
max-height:30px;
}
HTML:
HTML：
<img src="foo.svg" />
I am looking for this svg image to scale proportionately to a max height of 30 pixels high. The natural dimensions of the svg are 200px by 200px. Works great in FF and Chrome (30x30) but in IE9 the image is 30x200. Now here is the kicker. It only happens with certain SVG files, other svgs scale correctly.
我正在寻找这个 svg 图像以按比例缩放到 30 像素高的最大高度。svg 的自然尺寸为 200 像素 x 200 像素。在 FF 和 Chrome (30x30) 中效果很好，但在 IE9 中图像为 30x200。现在是踢球者。它只发生在某些 SVG 文件中，其他 svgs 可以正确缩放。
It seems the difference is one is made of polygons, and the other is made of paths.
似乎区别在于一个由多边形组成，另一个由路径组成。
does not scale correctly:
无法正确缩放：
http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg
http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg
does scale correctly:
是否正确缩放：
any idea on why this happens, or how I can get the first one to scale proportionately in ie9?
关于为什么会发生这种情况的任何想法，或者我如何让第一个在 ie9 中按比例缩放？
回答by robertc
To get more consistent scaling across browsers always ensure you specify a viewBoxbut leave off the widthand heightattributes on your svgelement. I've created a test pagefor comparing the effect of specifying the different SVG attributes in combination with widths and heights specified in CSS. Compare it side by side in a few different browsers and you'll see a lot of differences in the handling.
为了获得跨浏览器更加一致的比例始终确保您指定的viewBox，但离开关闭width和height您的属性svg的元素。我创建了一个测试页面，用于比较指定不同 SVG 属性以及 CSS 中指定的宽度和高度的效果。在几个不同的浏览器中并排比较它，你会发现处理方式有很多不同。
回答by Able
To fix it in ie9 and not to stuck with this. I don't know why, but you should set width:100% through css-rule, but not in img-tag. Aspect ratio will work by magic)) It helped me, hope this post will help other.
在ie9中修复它而不是坚持这个。我不知道为什么，但是您应该通过 css-rule 设置 width:100%，而不是在 img-tag 中。纵横比会神奇地起作用））它帮助了我，希望这篇文章能帮助其他人。
回答by Martenti
You can also look here: https://gist.github.com/larrybotha/7881691- this is the continuation of this "story".
你也可以看这里：https: //gist.github.com/larrybotha/7881691——这是这个“故事”的延续。
Fix SVG in <img>tags not scaling in IE9, IE10, IE11
修复<img>标签中的SVG未在 IE9、IE10、IE11 中缩放
IE9, IE10, and IE11 don't properly scale SVG files added with imgtags when viewBox, widthand heightattributes are specified. View this codepenon the different browsers.
img当viewBox,width和height属性被指定时，IE9、IE10 和 IE11 无法正确缩放添加了标签的SVG 文件。在不同的浏览器上查看此代码笔。
Image heights will not scale when the images are inside containers narrower than image widths. This can be resolved in 2 ways.
当图像位于比图像宽度窄的容器内时，图像高度不会缩放。这可以通过两种方式解决。
Use sedin bash to remove width and height attributes in SVG files
sed在 bash 中使用删除 SVG 文件中的宽度和高度属性
As per this answer on Stackoverflow, the issue can be resolved by removing just the widthand heightattributes.
根据Stackoverflow 上的这个答案，可以通过仅删除width和height属性来解决该问题。
This little script will recursively search your current working directory for SVG files, and remove the attributes for cross browser compatibility:
这个小脚本将递归搜索您当前工作目录中的 SVG 文件，并删除跨浏览器兼容性的属性：
find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'
Caveats
注意事项
Removing width and height attributes will force the image to occupy the full width of its container in non-IE browsers.
删除宽度和高度属性将强制图像在非 IE 浏览器中占据其容器的整个宽度。
IE10 (other browsers require testing) will scale the images down to some arbitrary size - meaning you will need to add width: 100%to your CSS for those images to fit their containers.
IE10（其他浏览器需要测试）会将图像缩小到任意大小 - 这意味着您需要将width: 100%这些图像添加到 CSS 以适应它们的容器。
Target IE with CSS
使用 CSS 定位 IE
Since the above solution requires CSS anyways, we might as well use a hack to get IE to behave, and not worry about having to manage every individual SVG file.
由于上述解决方案无论如何都需要 CSS，我们不妨使用 hack 来让 IE 正常运行，而不必担心必须管理每个单独的 SVG 文件。
The following will target all imgtags containing an SVG file, in IE6+ (only IE9+ support SVG files, however).
以下将针对imgIE6+ 中包含 SVG 文件的所有标签（但是，只有 IE9+ 支持 SVG 文件）。
/*
* Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
*
* [1] IE9
* [2] IE10+
*/
/* 1 */
.ie9 img[src*=".svg"] {
width: 100%;
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
width: 100%;
}
}
Caveats
注意事项
This targets every imgtag containing ".svg" in IE9, IE10, and IE11 - if you do not want this behaviour on a particular image, you will have to add a class to override this behaviour for that image.
这针对imgIE9、IE10 和 IE11 中包含“.svg”的每个标签 - 如果您不希望在特定图像上出现此行为，则必须添加一个类来覆盖该图像的此行为。
回答by Andrew Swift
I have spent weekstrying all kinds of solutions to be able to use SVG's in a size-adaptable website that works for major modern browsers.
我花了数周时间尝试各种解决方案，以便能够在适用于主要现代浏览器的大小自适应网站中使用 SVG。
The SVG's need to be scaled using CSS percentages and include embedded bitmapped images.
SVG 需要使用 CSS 百分比进行缩放并包含嵌入的位图图像。
The onlysolution that I have found for percentage resizing in IE is to embed external SVG's in an <object> tag.
我发现在 IE 中调整百分比大小的唯一解决方案是在 <object> 标签中嵌入外部 SVG。
There are various solutions for resizing SVG's in IE to strict pixel sizes, but none of them work for percentage resizing.
有多种解决方案可以将 IE 中的 SVG 大小调整为严格的像素大小，但它们都不适用于百分比调整大小。
I have created a non-exhaustive test suite here.
我在这里创建了一个非详尽的测试套件。
回答by Brandon Buttars
Somehow this scss fixed my issue.
不知何故，这个 scss 解决了我的问题。
ul {
li {
list-style: none;
margin: 0;
padding: 0;
display: inline;
img {
height: 20px;
margin: 0 10px;
display: inline-block;
}
}
}
I was actually making a centered list of logos for my footer and was having width issues. Normally I create an inline-block with a block element inside of it. Creating an inline element with an inline-block element worked for me. This is a specific implementation that the bug showed up for me and doesn't really resolve every bug but hopefully it helps someone reading this.
我实际上是在为我的页脚制作一个居中的徽标列表，并且遇到了宽度问题。通常我会创建一个内联块，其中包含一个块元素。使用内联块元素创建内联元素对我有用。这是该错误向我显示的特定实现，并没有真正解决每个错误，但希望它可以帮助阅读本文的人。
回答by Jason Vasilev
Probably a rare case for that issue could be using image-webpack-loader in webpack. The loader might be removing the viewBox attribute for some of your svgs. You would need to disable that option through webpack.config.js
该问题的一个罕见情况可能是在 webpack 中使用 image-webpack-loader。加载程序可能会删除某些 svg 的 viewBox 属性。您需要通过 webpack.config.js 禁用该选项
loader: 'image-webpack-loader',
options: {
svgo: {
plugins: [{
removeViewBox: false,
}],
},
},
