CSS 在 IE9-10 中压缩 SVG 的背景大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21840551/
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
Background-size with SVG squished in IE9-10
提问by Julesfrog
I have a div set with a background image:
我有一个带有背景图像的 div 集：
<div>Play Video</div>
with the following CSS:
使用以下 CSS：
div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}
The background size is respected in Firefox, Safari and Chrome. In IE8, the SVG is replaced by the PNG file. However, in IE9 and IE10, the SVG file is drastically sized down. The problem seems to be linked to the width and height of the div. If I add a height of 150px, the SVG is rendered properly. If I make it smaller (i.e. 100px) the graphic starts to shrink.
背景尺寸在 Firefox、Safari 和 Chrome 中受到尊重。在 IE8 中，SVG 被替换为 PNG 文件。但是，在 IE9 和 IE10 中，SVG 文件的大小被大幅缩小。问题似乎与 div 的宽度和高度有关。如果我添加 150 像素的高度，SVG 将正确呈现。如果我把它变小（即 100 像素），图形开始缩小。
Has anyone found a way to fix this issue in Explorer? Is there a way to tell IE to use the background-size value independently of the width and height of the div?
有没有人在资源管理器中找到解决此问题的方法？有没有办法告诉 IE 独立于 div 的宽度和高度使用 background-size 值？
回答by mbxtr
Be sure that your SVG has a widthand heightspecified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
确保您的 SVG 具有width和height指定。如果您从 Illustrator 生成它，请确保取消选中“响应式”框，因为此选项会删除宽度和高度。
回答by Simeon Rowsell
Adding a width and height to the SVG as mbxtr said nearly worked for me. I needed to add preserveAspectRatio="none slice"as well to get it working responsively in IE.
正如 mbxtr 所说，为 SVG 添加宽度和高度几乎对我有用。我还需要添加preserveAspectRatio="none slice"以使其在 IE 中响应地工作。
回答by Harry Joao
I had this issue and I found that either removing the heightand widthinside the code for the svg BUT keeping the viewBox can solve the issue.
我遇到了这个问题，我发现删除svg 代码中的高度和宽度但保留 viewBox 可以解决问题。
I recommend using a compiler site like : https://jakearchibald.github.io/svgomg/and setting the option to "prefer viewBox over height and width"
我建议使用像这样的编译器站点：https: //jakearchibald.github.io/svgomg/并将选项设置为“首选 viewBox 超过高度和宽度”
ALSOif none of this works, in Illustrator try applying a square background around the svg image but leaving enough padding around the edges.
此外，如果这些都不起作用，请在 Illustrator 中尝试在 svg 图像周围应用方形背景，但在边缘周围留下足够的填充。
And import the svg's in your Stylesheet using --> data uri: ... example:
并使用 --> data uri: ... 示例在样式表中导入 svg：
background-image: data-uri('image/svg+xml;charset=UTF-8',' where/your/svg/is/located');
背景图像：数据 uri('image/svg+xml;charset=UTF-8',' where/your/svg/is/located');
回答by Christian Krammer
For me these 3 fixes helped:
对我来说，这 3 个修复有帮助：
- If possible set the background-position to "center"
- For background-size set both values, "100% auto" won't do the trick, so use "100% 100%"
- If that still doesn't help alter the last to values "viewBox" attribute of the SVG itself and make it one pixel wider and higher than the width and the height of the SVG. This shrinks the SVG a little bit, but stops IE from cutting it off - and the smaller size won't be noticed at all.
- 如果可能，将背景位置设置为“中心”
- 对于 background-size 设置两个值，“100% auto”不会成功，所以使用“100% 100%”
- 如果这仍然无助于将最后一个值更改为 SVG 本身的“viewBox”属性，并使其比 SVG 的宽度和高度宽和高一个像素。这会稍微缩小 SVG，但会阻止 IE 将其切断 - 并且根本不会注意到较小的尺寸。
回答by Julesfrog
Well, it doesn't look like there is a solution. Surprise surprise. It's IE after all. I ended up using the following code:
好吧，看起来没有解决方案。惊喜惊喜。毕竟是IE。我最终使用了以下代码：
div {
padding: 20px;
width: 150px;
position: relative;
}
div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}
I liked the cleaner version better, but this hack works in all modern browsers, including IE8, 9, and 10 (probably 11 but I didn't test).
我更喜欢更简洁的版本，但是这个 hack 适用于所有现代浏览器，包括 IE8、9 和 10（可能是 11，但我没有测试）。
回答by Chaffron
We had a similar issue with SVG background images that weren't the full site of a containing element (such as the magnifying glass at the left side of a search input).
我们在 SVG 背景图像上遇到了类似的问题，这些图像不是包含元素的完整站点（例如搜索输入左侧的放大镜）。
We'd created out SVGs in Illustrator CC but running them through Peter Collingridge's SVG optimiser to take out all the unnecessary cruft did the trick. http://petercollingridge.appspot.com/svg-optimiser
我们已经在 Illustrator CC 中创建了 SVG，但是通过 Peter Collingridge 的 SVG 优化器运行它们以去除所有不必要的 cruft 就成功了。 http://petercollingridge.appspot.com/svg-optimiser
回答by Super Model
Svg background image size will render same on IE and Chrome using these properties
Svg 背景图像大小将使用这些属性在 IE 和 Chrome 上呈现相同
background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;
回答by cfranklin
I changed all my SVGs to not responsive in Illustrator to no avail.
我将所有 SVG 更改为在 Illustrator 中不响应，但无济于事。
And because I am looking for code examples I missed that the correct answer, when saying "ensure your SVG has a width and height specified", they meant this kind of thing:
因为我正在寻找代码示例，所以我错过了正确答案，当说“确保您的 SVG 具有指定的宽度和高度”时，他们的意思是这样的事情：
.my-class {
background-size: 200px 100px;
}
And if the size is a bit off in IE vs Chrome for example I used a media query to target IE:
如果大小在 IE 与 Chrome 中有点偏差，例如我使用媒体查询来定位 IE：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.my-class {
background-size: 200px 110px;
}
}
回答by Beatriz Gonzalez
I tried @mbxtr's solution
我试过@mbxtr 的解决方案
Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
确保您的 SVG 指定了宽度和高度。如果您从 Illustrator 生成它，请确保取消选中“响应式”框，因为此选项会删除宽度和高度。
That still didn't work for me on windows Chrome and IE. I was exporting a font icon, so if you have a font, make sure you export it as:
在 Windows Chrome 和 IE 上，这仍然对我不起作用。我正在导出一个字体图标，因此如果您有字体，请确保将其导出为：
- "font: convert to outlines"
- and "responsive" is false
- “字体：转换为轮廓”
- 和“响应”是假的
I also unchecked "minify" just in case...
我也取消选中“缩小”以防万一......
回答by Maksimov Maksim
1. javascript
1. javascript
drips.style.top = -dripsTop + "px";
var browser = window.navigator.userAgent;
if (browser.indexOf("Trident") > 0) {
$(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
}
- svg (original height=1050) add directly to himself svg file preserveAspectRatio="none" height="2100"
- svg (原始高度=1050) 直接给自己添加svg文件preserveAspectRatio="none" height="2100"
