在 IE 中使用 SVG 图像作为背景答案

【问题标题】：using SVG image as background in IE在 IE 中使用 SVG 图像作为背景
【发布时间】：2014-08-19 04:07:11
【问题描述】：

我在 IE 中使用 SVG 图像作为背景时遇到了一些问题。它适用于简单的 SVG，但不适用于其他 SVG。我有一个例子小提琴here：

HTML：

<p>SVG image not repeating in IE</p>
<div id="div1">
</div>
<div id="div2"></div>
<div id="div3"></div>

CSS：

div
{float: left;
    margin-left:20px;
    width:200px;
    height:300px;
        border:1px solid black;
}   
#div1
{
    background:url("https://dl.dropboxusercontent.com/u/74728667/Interstate_75_icon.svg");
}
#div2
{
    background:url("https://dl.dropboxusercontent.com/u/74728667/Circle.svg");
}
#div3
{
    background:url("https://dl.dropboxusercontent.com/u/74728667/brick.svg");
}

结果：

IE：

铬：

我的代码有问题吗？

【问题讨论】：

标签： css internet-explorer svg

【解决方案1】：

使用bricks.svg 上this 问题的解决方案似乎可以解决问题。

【讨论】：

问题是使用 none 作为 preserveAspectRatio 会导致图像被缩放。我根本不希望图像被缩放。
您可能需要找到适合您的房产……不止一处。 Preserve Aspect Ratio @ MDN
州际标志和圆圈具有定义的宽度和高度。砖没有。所以砖 svg 正在缩放以适应。如果您在 svg 中设置宽度和高度，则它应该按预期重复而不是缩放。

【解决方案2】：

IE8 及以下不支持。您可以安装插件以使其正常工作，也可以安装插件以解决它。 (SVGWeb, Modernizr)

【讨论】：

这也是 IE11 中的问题..所以你的“答案”应该是评论
您的代码是正确的，但您的 SVG 文件可能未正确呈现。尝试petercollingridge.appspot.com/svg-editor优化SVG文件，看看能否解决问题
"你必须有 50 声望才能添加评论"