12

当我在这样的背景属性中使用 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 下尝试了我的测试，行为是相同的。
4

2 回答 2

0

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

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

作为一种解决方法，尝试使用 3d 平移并在 z 轴上移动元素以实现大小更改。但是，这不会对最终结果产生太多控制。

.svg-button {
    -webkit-transform: perspective(800px) translateZ(-300px);
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}
于 2012-08-09T09:10:39.100 回答
-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，我编写了临时修改 CSS 宽度属性的 javascript，并在小延迟后将其返回。通过这种方式，我强制重绘 CSS 背景。

于 2012-08-12T14:57:31.600 回答