在 IE9-10中使用 SVG 压缩背景大小

我有一个带背景图片的 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 的宽度和高度有关。如果我添加一个150px 的高度，SVG 将被正确呈现。如果我把它缩小(比如100px) ，图像就会开始缩小。

有人在资源管理器中找到解决这个问题的方法吗？有没有一种方法可以告诉 IE 使用背景大小值而不依赖于 div 的宽度和高度？

56257 次浏览
小开

看起来没有解决办法。惊喜惊喜。毕竟是 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;
}

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

小开
最佳答案

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

小开

SVG 背景图片也有类似的问题，它们不是包含元素的完整站点(比如搜索输入左侧的放大镜)。

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

小开

对我来说，这3个修复方法有所帮助:

  • 如果可能的话，将背景位置设置为“居中”
  • 对于背景大小设置两个值，“100% auto”不会起作用，因此使用“100% 100%”
  • 如果这仍然不能帮助改变 SVG 本身的最后一个值“ viewBox”属性，使其比 SVG 的宽度和高度增加一个像素。这使得 SVG 缩小了一点，但是阻止了 IE 切断它——并且更小的尺寸根本不会被注意到。
小开

像 mbxtr 所说的那样向 SVG 添加宽度和高度对我来说几乎奏效了。我需要添加 preserveAspectRatio="none slice"以及得到它的工作响应在 IE。

小开

我试过@mbxtr 的解决方案

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

这对我的 Chrome 和 IE 浏览器仍然不起作用。 我正在导出一个字体图标，所以如果你有一个字体，确保你导出为:

  • 字体: 转换为轮廓
  • 和 “有反应”是假的

我还没有检查“缩小”，以防万一..。

小开

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%"});
}
  1. (原始高度 = 1050) 直接添加到自己的 svg 文件 PresveAspectratio = “ none”height = “2100”
小开

我遇到过这个问题，我发现删除 svg 代码中的 身高和 宽度，但是保留 viewBox 可以解决这个问题。

我建议使用如下编译器站点: < a href = “ https://jakearchibald.github.io/svgomg/”rel = “ nofollow norefrer”> https://jakearchibald.github.io/svgomg/ 并将选项设置为 < em > “选择 viewBox 而不是 height 和 width”

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

并在样式表中使用—— > data uri: ..。 例如:

Back-image: data-uri (‘ image/svg + xml; charset = UTF-8’，‘ where/your/svg/is/location’) ;

小开

使用这些属性，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;
小开

我将所有的 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;
}
}

提交答案