css - SVG 图像在 IE9 的 CSS 背景中不起作用

Question

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

fiddle :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>标签中)，你可以使用固定的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">