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上的示例

更新我发现了一些关于这个问题的更多信息：

StackOverflow question
Bug ticket for Chrome（我在Safari / Chrome / IE9 / 10下尝试过我的测试，行为也一样。

Answer 1

我正在“玩”这一段时间，并注意到这也是字体。虽然它现在似乎已修复（至少对于字体）。

据我了解内部工作原理，缩放元素的内容将映射到纹理，而纹理又会缩放。

作为解决方法，请尝试使用3d平移并在z轴上移动元素以实现尺寸更改。尽管如此，这并不会对最终结果产生如此多的控制。

.svg-button {
    -webkit-transform: perspective(800px) translateZ(-300px);
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

Answer 2

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

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

对于Firefox，我仍然使用CSS scale属性，因为Firefox不支持缩放属性。同时Firefox很好地扩展了SVG背景。 See result

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

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

2 个答案: