在IE9中，SVG图像在CSS背景中不起作用

Question

我无法让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一起提供。

Answer 1

如果您在background-image属性中使用此图片 （<img>标记中的不），则可以使用fixed { {1}}和width属性。它可以在所有流行的浏览器中很好地扩展 - JSFiddle。

height

＆＃13;

＆＃13;

<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>

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;