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

【问题标题】：Using SVG as CSS3 background-image with scaling使用 SVG 作为带有缩放的 CSS3 背景图像
【发布时间】：2012-08-08 00:47:53
【问题描述】：

当我在这样的背景属性中使用 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 下进行了测试，结果是一样的。

【问题讨论】：

SVG 背景作为 CSS 背景很遗憾只有 Opera 和 Webkit 浏览器支持。你试过background-size: 300%;而不是变换背景吗？
这只是示例。在实际情况下，我对层次结构的根应用了转换。
如果您发布一个包含必要文件的 jsfiddle 会有所帮助，这样人们就可以确切地看到什么是/不工作，并“摆弄”它。
@feeela 所有最近的浏览器都支持 SVG 作为 CSS 背景，请参阅 caniuse.com/#feat=svg-css

标签： html css svg

【解决方案1】：

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

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

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

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

【讨论】：

谢谢。有趣的工作区，但我认为它不太适合实际应用。我想了解我的问题的性质。

【解决方案2】：

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

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

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

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

【讨论】：