在元素上应用 CSS3:Zoom 时关闭 svg 上的抗锯齿？答案

【问题标题】：Turn off anti-aliasing on svg when applying CSS3:Zoom on the element?在元素上应用 CSS3:Zoom 时关闭 svg 上的抗锯齿？
【发布时间】：2013-05-29 03:38:26
【问题描述】：

我发现当 CSS3 缩放应用于小型 SVG 图标（9px:9px 缩放：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>

【问题讨论】：

哪个浏览器？某些浏览器在调整大小或缩放时不会重新计算 SVG。什么是 CSS3 缩放？你的意思是用浏览器放大吗？还是非标准的 IE 属性？
感谢您通知我的问题。这是CSS3 Zoom 的一些信息。大多数现代浏览器都广泛支持它。我正在 Chrome 和 Safari iOS 上尝试这个。
是的，这是非标准的。它可能只是缩放渲染元素而不重新计算。您是否尝试过使用比例变换功能？或者在最初显示原始 SVG 时可能会变大并缩小？
好吧，我自己找到了解决方案。添加： shape-rendering="crispEdges" 到 svg 就可以了。谢谢@DavidStorey。

标签： css svg antialiasing

【解决方案1】：

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

shape-rendering="crispEdges"

到 SVG 元素。

来自Mozilla MDN：

crispEdges 表示用户代理应尝试强调艺术品干净边缘之间的对比，而不是渲染速度和几何精度。为了获得清晰的边缘，用户代理可能会关闭所有线条和曲线的抗锯齿，或者可能只关闭接近垂直或水平的直线。此外，用户代理可能会调整线条位置和线条宽度以使边缘与设备像素对齐。

查看jsFilddle的区别。

【讨论】：

有人知道浏览器对此的支持吗？似乎找不到任何参考。
截至 2016 年，浏览器支持可在此处找到 caniuse.com/#feat=css-crisp-edges
尽管听起来很有希望，但 2017 年 9 月对 crispEdges 的支持仍然仅限于 Firefox 和 Safari，结果在 Firefox 中看起来更像pixelated，而不是其他任何东西：@987654324 @
也许现在不一样了@VolkerE。但 Firefox 和 Chrome 为我呈现相同的 CodePen（无法检查 Safari rn）。