SVG 图像在 IE9 的 CSS 背景中不起作用答案

【问题标题】：SVG image doesn't work in CSS background in IE9SVG 图像在 IE9 的 CSS 背景中不起作用
【发布时间】：2014-07-01 19:48:05
【问题描述】：

我无法让 SVG background-image 在 IE9 或 IE10 中工作，这可能吗？（IE11还可以）

小提琴：http://jsfiddle.net/chovy/3abhj/1/

<input type="text" class="invalid">

.invalid {
    border: 1px solid black;
    padding: 2px 10px;
    background: url(http://chovy.us.to/test/x.svg) no-repeat 0 -2px;
    background-size: 22px 22px;
}

x.svg 与 image/svg+xml 一起服务。

【问题讨论】：

SVG 应该可以在 IE9 中工作：caniuse.com/svg。您的代码在 IE11 的 IE9 的emulation 中工作。
我希望我安装了 real IE 9，所以我可以进一步提供帮助。 :(
在 IE10 中也不起作用。 IE11还可以
您是否尝试过在 width 和 height 属性（在您的情况下为 24px）？可能是IE9没有根据background-size调整svg的大小。
它的background-image，没有<svg> 元素。还是您在实际的image.svg 文件中谈论？那将是对尺寸进行硬编码，这意味着我不能将它重用于其他尺寸。

标签： css svg background-image

【解决方案1】：

如果您在background-image 属性中仅使用此图像（在<img> 标记中不是），您可以使用固定的width 和height属性。它在所有流行的浏览器中都能很好地扩展——JSFiddle。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
    <path fill="#C54C44" d="M17.5 7.4L16.1 6 12 10.1 7.9 6 6.5 7.4l4.1 4.1-4.1 4.1L7.9 17l4.1-4.1 4.1 4.1 1.4-1.4-4.1-4.1"/>
</svg>

input {
    display: block;
    margin-top: 10px;    
}

.invalid {
    border: 1px solid black;
    padding: 2px 10px;
    background: url(http://imgh.us/x_1.svg) no-repeat 0 -2px;
    background-size: 22px 22px;
}

.invalid-large {
    border: 2px solid black;
    padding: 10px 20px;
    background: url(http://imgh.us/x_1.svg) no-repeat 0 -4px;
    background-size: 44px 44px;
}

.invalid-max {
    border: 3px solid black;
    padding: 20px 20px;
    background: url(http://imgh.us/x_1.svg) no-repeat 0 -6px;
    background-size: 66px 66px;
}

<input type="text" class="invalid">
<input type="text" class="invalid-large">
<input type="text" class="invalid-max">

【讨论】：