SVG图像在IE9中作为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进行服务的。

- chovy

---

SVG应该在IE9中工作：http://caniuse.com/svg。您的代码确实可以在IE11的*模拟*IE9中工作。 - KatieK

我希望我安装了真正的IE 9，这样我就可以更进一步地帮助了。:( - KatieK

在IE10中也无法工作。IE11可以。 - chovy

你尝试指定在<svg>根元素上的width和height属性（在您的情况下为24px）吗？这可能是因为IE9不会根据background-size来缩放svg。 - Erik Dahlström

可能是Background-size with SVG squished in IE9-10的重复问题。 - sergdenisov

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

- sergdenisov