使用SVG作为带有缩放的CSS3背景图像

Question

当我在后台属性中使用SVG时,如下所示:

.svg-button {
    -webkit-transform: scale(3.0) // root of the problem!
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

结果我得到了模糊的图像.同时用这种风格标记的文字很清楚.此外,如果我使用CTRL ++(浏览器缩放)缩放页面而不是转换属性,一切都很清楚.

如果我替换CSS背景属性:

<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>

在任何情况下,图像都以任何比例清晰.

问题出在哪儿？

关于jsfiddle的示例

更新: 我找到了有关此问题的更多信息:

1. StackOverflow问题
2. Chrome的错误票证(我在Safari/Chrome/IE9/10下尝试了我的测试,行为也一样.

Answer 1

对于 Chrome/Safari IE9/10，我决定使用 CSS 缩放属性而不是缩放属性。

.svg-button {
    zoom: 300%;
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

对于 Firefox，我仍然使用 CSS 缩放属性，因为 Firefox 不支持缩放属性。同时，Firefox 可以很好地缩放 SVG 背景。查看结果。

对于 IE9，我编写了 javascript，它临时修改 CSS 宽度属性，并在小延迟后将其返回。通过这种方式我强制重绘CSS背景。