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

Question

我有一个设置了背景图片的 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的宽度和高度使用background-size值？

- Julesfrog

---

好问题，这种情况发生过很多次。 - Suresh Karia

Answer 1

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

- mbxtr

---

这对我也管用。我在编辑器中打开SVG文件，将viewBox属性的最后两个值复制粘贴到width和height属性上。所以，在修改前：<svg viewBox="0 0 800 150"> ，修改后：<svg viewBox="0 0 800 150" width="800" height="150">。 - Tomas Lieberkind

谢谢mbxtr。这解决了问题。很抱歉回复晚了。我已经转到另一个项目，现在才回来处理这个。 - Julesfrog

我的问题要求我删除SVG代码中的高度和宽度值，顺便说一下。 - Eric Steinborn

我猜可能因人而异，对我来说添加宽度和高度属性没有起作用。IE10似乎仍然不知道“cover”的含义，它的表现就像“contain”。 - James

@gunnx 这对我在IE中解决了问题，使用SVG作为响应式容器中的背景图像，并将background-size设置为'cover'。 - Matty J

Answer 2

像mbxtr说的那样为SVG添加宽度和高度对我几乎有用。我还需要添加preserveAspectRatio="none slice"才能使其在IE中响应式地工作。

- Simeon Rowsell

---

在实际的SVG文档中，将preserveAspectRatio="none slice"添加到<svg>标签中，这就为我解决了这个问题！谢谢你的建议。 - Micah Murray

Answer 3

以下3种方法对我有帮助：

• 如果可能，请将background-position设置为“center”
• 对于background-size，同时设置两个值，“100％ auto”无法解决问题，因此请使用“100％ 100％”
• 如果仍然无效，请调整SVG本身的“viewBox”属性的最后两个值，并使其比SVG的宽度和高度多一个像素。这会略微缩小SVG，但能防止IE剪裁它 - 而这种较小的大小根本不会被注意到。

- Christian Krammer

Answer 4

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

我建议使用编译器网站，如：https://jakearchibald.github.io/svgomg/，并将选项设置为"prefer viewBox over height and width" 另外，如果上述方法都不起作用，在Illustrator中尝试在SVG图像周围应用一个正方形背景，但要在边缘留出足够的填充空间。

使用以下方法将SVG导入样式表：--> data uri: ... 示例： background-image: data-uri('image/svg+xml;charset=UTF-8',' where/your/svg/is/located');

- Harry Joao

---

这是一个很棒的网站。感谢分享。 - MortenMoulder

非常好用的工具！ - rémy

Answer 5

恩，看起来没有解决方案。 毫不奇怪。 毕竟这是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，但我没有测试过）。

- Julesfrog

---

这里面有什么技巧吗？你能解释一下吗？ - Mr_Green

我认为他正在为不同的浏览器使用不同的图标。并非适用于所有人。 - Hello Universe

Answer 6

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%"});
  }

---

2. SVG（原始高度=1050） 将SVG文件直接添加到自身 preserveAspectRatio="none" height="2100"

- Maksimov Maksim

Answer 7

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

- Billu

Answer 8

我们曾经遇到过类似的问题，即SVG背景图像不是包含元素的完整尺寸（例如搜索输入框左侧的放大镜）。

我们使用Illustrator CC创建了SVG，但通过Peter Collingridge的SVG优化器运行它们以去除所有不必要的冗余就解决了问题。http://petercollingridge.appspot.com/svg-optimiser

- Chaffron

Answer 9

我尝试了@mbxtr的解决方案

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

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

• "字体：转换为轮廓"
• 和"响应式"为false

我还取消了“缩小”选项，以防万一...

- Beatriz Gonzalez

Answer 10

我在Illustrator中将所有SVG更改为非响应式，但没有效果。

由于我正在寻找代码示例，因此错过了正确答案，当他们说“确保你的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;
    }
}

- cfranklin