Question

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

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

有关详细信息，请访问此jsfiddle。 firefox有什么问题？

<!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>

Answer 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代码将类似于以下内容（请注意每个shape-rendering上的<g>属性} tags：

<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 ... -->

在Firefox中缩放背景svg的css sprite

1 个答案: