Firefox中缩放背景svg的css sprite答案

【问题标题】：css sprite for scaled background svg in firefoxFirefox中缩放背景svg的css sprite
【发布时间】：2013-11-18 11:09:29
【问题描述】：

我想使用缩放的 svg 图像作为不同大小的图标，但在 firefox 中发现不一致的行为。

如果没有 css sprite，firefox 会对缩放的图像进行抗锯齿处理。但是对于 css sprite，firefox 不会对它们进行反锯齿处理。因此，使用 css sprite 的图标看起来很难看。

详情请访问jsfiddle。火狐有什么问题？

<!DOCTYPE html>
<html>
<head> 
<style type='text/css'>
.whole {
    width: 80px;
    height: 80px;
    background-image: url("outliner.svg");
    background-size: 100% 100%;
}
i {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("outliner.svg");
    background-size: 500% 500%;
}
.circle { background-position: -32px 0;}
.disk { background-position: 0 -16px; }
</style>
</head>
<body>
<div>With CSS Sprite:</div>
<i class="circle"></i><i class="disk"></i>
<div>Without CSS Sprite:</div>
<i class="whole"></i>
</body>
</html>

【问题讨论】：

标签： css firefox svg css-sprites antialiasing

【解决方案1】：

目前，没有 CSS 方法可以更改 SVG 元素的呈现模式，但有一个 SVG 属性可以这样做：shape-rendering。

在将shape-rendering: <value> 添加到每个<g> 元素之后，我继续使用ran your SVG file through a base64 encoder（您可以使用它解码以下示例中的数据），其中<value>有几个选项：optimizeSpeed (example)、crispEdges (example) 和 geometricPrecision (example)。

根据您希望最终 SVG 的显示方式，只需选择一个特定值，您的最终 SVG 代码将如下所示（注意每个 <g> 标记上的 shape-rendering 属性）：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480">
<g shape-rendering="crispEdges" stroke="#333" fill="#333">
  <g shape-rendering="crispEdges" id="icon-1-1" transform="translate(0,0)">
    <line x1="10" y1="10" x2="86" y2="86" stroke-width="12"/>
    <line x1="10" y1="86" x2="86" y2="10" stroke-width="12"/>
  </g>
  <g shape-rendering="crispEdges" id="icon-1-2" transform="translate(96,0)">
    <!-- svg continues below ... -->

【讨论】：

谢谢。但是无论我选择哪个选项，带有 css sprite 的图标仍然比没有 css sprite 的图标看起来更丑。
@Z.H.实际上，现在我再看一下 CSS 精灵与原始示例中的非精灵版本的对比，they look exactly the same。该图像是他们截取屏幕截图并放大到 4 倍（在 Firefox 25 中查看时）后的样子。
哦，看来火狐团队已经修复了这个bug。我正在使用 Firefox 17 ESR。