在 IE9-10 中压缩 SVG 的背景大小答案

【问题标题】：Background-size with SVG squished in IE9-10在 IE9-10 中压缩 SVG 的背景大小
【发布时间】：2014-03-17 10:13:38
【问题描述】：

我有一个带有背景图片的 div：

<div>Play Video</div>

使用以下 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;
}

背景大小在 Firefox、Safari 和 Chrome 中得到尊重。在 IE8 中，SVG 被 PNG 文件替换。但是，在 IE9 和 IE10 中，SVG 文件的大小大大减小。问题似乎与 div 的宽度和高度有关。如果我添加 150 像素的高度，则 SVG 会正确呈现。如果我把它变小（即 100 像素），图形就会开始缩小。

有没有人在资源管理器中找到解决此问题的方法？有没有办法告诉 IE 独立于 div 的宽度和高度使用 background-size 值？

【问题讨论】：

好问题，这种情况发生了很多次。

标签： css svg internet-explorer-9 internet-explorer-10 background-size

【解决方案1】：

我将所有 SVG 更改为在 Illustrator 中不响应，但无济于事。

因为我正在寻找代码示例，所以我错过了正确答案，当说“确保您的 SVG 具有指定的宽度和高度”时，他们的意思是这种事情：

    .my-class {
        background-size: 200px 100px;
    }

如果 IE 与 Chrome 中的大小有点偏差，例如，我使用媒体查询来定位 IE：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .my-class {
        background-size: 200px 110px;
    }
}

【讨论】：

【解决方案2】：

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;

【讨论】：

【解决方案3】：

我遇到了这个问题，我发现删除 svg 代码中的 height 和 width 但保留 viewBox 可以解决问题。

我建议使用编译器站点，例如：https://jakearchibald.github.io/svgomg/ 并将选项设置为 "prefer viewBox over height and width"

另外如果这些都不起作用，请在 Illustrator 中尝试在 svg 图像周围应用方形背景，但在边缘留下足够的填充。

然后使用 --> data uri: ... 在样式表中导入 svg 示例：

background-image: data-uri('image/svg+xml;charset=UTF-8',' where/your/svg/is/located');

【讨论】：

这是一个很棒的网站。感谢分享。
非常好的工具！

【解决方案4】：

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（原始高度=1050）直接添加到自己的svg文件中 preserveAspectRatio="none" height="2100"

【讨论】：

【解决方案5】：

我尝试了@mbxtr 的解决方案

确保您的 SVG 具有指定的宽度和高度。如果您从 Illustrator 生成它，请确保未选中“响应式”框，因为此选项会删除宽度和高度。

这对我在 Windows Chrome 和 IE 上仍然不起作用。我正在导出字体图标，因此如果您有字体，请确保将其导出为：

“字体：转换为轮廓”
并且“响应式”是错误的

我也取消选中“缩小”以防万一......

【讨论】：

【解决方案6】：

为 SVG 添加宽度和高度，正如 mbxtr 所说，几乎对我有用。我还需要添加 preserveAspectRatio="none slice" 以使其在 IE 中响应式工作。

【讨论】：

将preserveAspectRatio="none slice" 添加到实际 svg 文档中的

【解决方案7】：

对我来说，这 3 个修复有帮助：

如果可能，将背景位置设置为“中心”
对于 background-size 设置这两个值，“100% auto”不起作用，所以使用“100% 100%”
如果这仍然不能帮助将最后一个更改为 SVG 本身的“viewBox”属性值，并使其比 SVG 的宽度和高度宽和高一个像素。这会稍微缩小 SVG，但会阻止 IE 将其截断 - 并且根本不会注意到较小的尺寸。

【讨论】：

【解决方案8】：

对于不是包含元素的完整站点的 SVG 背景图像（例如搜索输入左侧的放大镜），我们遇到了类似的问题。

我们已经在 Illustrator CC 中创建了 SVG，但通过 Peter Collingridge 的 SVG 优化器运行它们以消除所有不必要的杂乱无章。 http://petercollingridge.appspot.com/svg-optimiser

【讨论】：

【解决方案9】：

确保您的 SVG 指定了 width 和 height。如果您从 Illustrator 生成它，请确保未选中“响应式”框，因为此选项会删除宽度和高度。

【讨论】：

我遇到了同样的问题。所以我们用编辑器打开了 svg。和 mbxtr 一样，illustrator 在
这也为我做了。我在编辑器中打开了 SVG，并将 viewBox 属性中的最后两个值复制/粘贴到宽度和高度属性中。所以，之前：
我的问题需要我删除 SVG 代码的高度和宽度值 FWIW。
YMMV 我猜，添加宽度和高度属性对我不起作用。 IE10 似乎仍然不知道“覆盖”是什么意思，它的行为就像“包含”。
@gunnx 这在 IE 中为我解决了这个问题，使用 SVG 作为响应容器中的背景图像，背景大小设置为“覆盖”。

【解决方案10】：

好吧，看起来没有解决方案。惊喜惊喜。毕竟是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;
}

我更喜欢更简洁的版本，但这个 hack 适用于所有现代浏览器，包括 IE8、9 和 10（可能是 11，但我没有测试）。

【讨论】：

其中的 hack 是什么？你能解释一下吗？
我认为他在不同的浏览器上使用不同的图标.. 不适合所有人