应用CSS3缩放元素时关闭SVG上的抗锯齿功能？

Question

应用CSS3缩放元素时关闭SVG上的抗锯齿功能？

14

我发现在小的SVG图标上应用CSS3缩放（例如9px：9px，zoom：1.5）时，SVG图标可能会变得模糊。有什么办法可以在这种情况下获得清晰干净的图标？提前感谢。

SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9">
    <g>
        <g fill="none" transform="translate(0.5, 0.5)"> 
            <g stroke="#000000" stroke-width="0.5" stroke-linecap="square" >
                <line x1="2" y1="4"  x2="6" y2="4"/>
                <line x1="4"  y1="2" x2="4" y2="6"/>
            </g>
            <g stroke="#909090" stroke-width="1" stroke-linecap="square" >
                <rect x="0" y="0" width="8" height="8"/>
            </g>
        </g>
    </g>
</svg>

- bigbearzhu

1

哪个浏览器？一些浏览器在缩放或放大时不会重新计算SVG。CSS3缩放是什么？您指的是在浏览器中仅进行缩放吗？还是指非标准IE属性？ - David Storey

感谢您关注我的问题。这里有一些关于 CSS3缩放的信息。它被大多数现代浏览器广泛支持。我正在Chrome和Safari iOS上尝试使用它。 - bigbearzhu

是的，这是非标准的。很可能只是缩放渲染元素而没有重新计算。您尝试过使用比例变换函数吗？或者在最初显示时将原始SVG放大并缩小比例？ - David Storey

我自己找到了解决方案。在SVG中添加shape-rendering="crispEdges"即可解决问题。感谢@DavidStorey。 - bigbearzhu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bigbearzhu · Accepted Answer

我自己找到了一个解决方案。诀窍是添加：

shape-rendering="crispEdges"

对SVG元素进行设置。

来自Mozilla MDN：

crispEdges表示用户代理将尝试强调艺术品的清晰边缘相比于渲染速度和几何精度。为了实现清晰的边缘，用户代理可能会关闭所有线条和曲线的抗锯齿功能，或者可能仅针对靠近垂直或水平的直线关闭抗锯齿。此外，用户代理还可以调整线条位置和线宽以使边缘与设备像素对齐。

请在jsFiddle中查看差异。