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

78

我有一个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的宽度和高度使用背景大小值？

— 朱尔斯青蛙
source

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

— eirenaios

169

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

— mbxtr
source

我遇到过同样的问题。所以我们用编辑器打开了svg。与mbxtr一样，illustrator会在<svg>标签中生成不带width，height属性的svg。您可以在此处

— stephanfriedrich 2014年

35

这对我也是如此。我在编辑器中打开了SVG，然后将最后两个值从viewBox属性复制/粘贴到width和height属性中。因此，之前：<svg viewBox =“ 0 0 800 150”>和之后：<svg viewBox =“ 0 0 800 150” width =“ 800” height =“ 150”>

— Tomas Lieberkind 2014年

2

我的问题要求我删除SVG代码的高度和宽度值FWIW。

— 埃里克·斯坦伯恩

2

YMMV，我想添加宽度和高度属性对我来说不起作用。IE10似乎仍然不知道“封面”是什么意思，它的作用类似于“包含”。

— 詹姆斯，

1

@gunnx在IE中为我解决了这个问题，在响应容器中将SVG作为背景图像，并且将background-size设置为“ cover”。

— Matty J

16

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

— 西蒙·罗塞尔
source

2

preserveAspectRatio="none slice"在实际的svg文档中添加到<svg>标记只是为我解决了这个问题！谢谢你的建议。

— 米卡·默里

4

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

如果可能，将背景位置设置为“中心”
对于背景大小设置两个值，“ 100％自动”将无法解决问题，因此请使用“ 100％100％”
如果这样仍然不能帮助将最后一个值更改为SVG本身的值“ viewBox”属性，并使它比SVG的宽度和高度高一个像素。这会稍微缩小SVG，但会阻止IE切断SVG，并且不会注意到较小的尺寸。

— 克里斯蒂安·克拉默
source

4

我遇到了这个问题，我发现删除svg但要保留viewBox的svg代码内部的高度和宽度都可以解决此问题。

我建议使用一个编译器站点，例如：https : //jakearchibald.github.io/svgomg/ ，并将选项设置为“在高度和宽度上首选viewBox”

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

并使用-> data uri：...示例将svg导入样式表中：

背景图片：data-uri（'image / svg + xml; charset = UTF-8'，'where / your / svg / is / location'）;

— 哈里·乔奥
source

那是一个很棒的网站。感谢您的分享。

— MortenMoulder

真的很好用的工具！

— 雷米（Remy）

3

好吧，看起来好像没有解决方案。惊喜惊喜。毕竟是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，但我没有测试）。

— 朱尔斯青蛙
source

2

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

— Mr_Green

我认为他为不同的浏览器使用了不同的图标。.不适合所有人

— Hello Universe

0

SVG背景图像并非包含元素的完整位置（例如，搜索输入左侧的放大镜），我们也遇到了类似的问题。

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

— 查弗龙
source

0

我尝试了@mbxtr的解决方案

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

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

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

我还取消选中“最小化”，以防万一...

— 比阿特丽斯·冈萨雷斯
source

0

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文件saveAspectRatio =“ none” height =“ 2100”

— 马克西莫夫马克西姆
source

0

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;

— 超级模特
source

0

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

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

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

而且，例如，如果大小在IE vs Chrome中有点小，我就使用媒体查询来定位IE：

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

— 富兰克林
source