抗锯齿、Web SVG 和 Raphaël.js答案

【问题标题】：Antialiasing, web SVG and Raphaël.js抗锯齿、Web SVG 和 Raphaël.js
【发布时间】：2011-03-03 13:24:32
【问题描述】：

我正在使用 Raphaël.js 绘制一些小圆圈（半径 2-4px），这是通过 SVG 在除 IE 之外的所有浏览器上完成的。圆圈对我来说看起来不平滑，所以我的问题是：

有没有办法为 Raphaël.js 添加抗锯齿功能？
除此之外，还有什么方法可以消除 SVG 对象的锯齿吗？

【问题讨论】：

SVG 在我看来是抗锯齿的。能给我举个例子吗？什么浏览器？其他 SVG 图像（如 Wikipedia 上的）是否看起来抗锯齿？
不知是浏览器问题。
这不相关吗？ stackoverflow.com/questions/11879836/…

标签： svg antialiasing raphael

【解决方案1】：

我也在寻找答案时偶然发现了这篇文章。在尝试将描边设置为较浅的颜色后，我发现它只是让它看起来很模糊。

但是，如果您像下面这样将描边设置为“无”，则会对边缘的平滑度产生很大影响。

    var circle = paper.circle(50, 40, 20);
    circle.attr("fill", "#F00");
    circle.attr("stroke", "none");

【讨论】：

【解决方案2】：

在进一步的实验中，我认为问题不在于 SVG 没有抗锯齿（事实上，我在绘制线条时发现，我通常想通过将 shapeRendering 设置为 crisp-edges 来禁用抗锯齿；参见 this issue ) 因为我希望我的圆圈边缘比提供的抗锯齿更平滑。

要在 Raphaël.js 中实现这一点，您可以分别设置 fill 和 stroke 颜色。例如，在白色背景上，将stroke 设置为比fill 浅的颜色可以达到预期的效果。

【讨论】：

下面的答案更好（我都测试过）-ps。 Corel 使用与 musefan 提到的相同的方法使物体变得清晰

【解决方案3】：

抗锯齿是通过 SVG 渲染器完成的，因此您需要查看显示 SVG 的客户端。然而，问题在于您所绘制的内容太小而无法很好地进行抗锯齿处理。如果你有一个 2px 半径的圆，它基本上被渲染为一个菱形，因为这是你可以得到的最接近那个大小的圆。半径的第一个像素用于圆的核心，第二个像素用于圆角，但它太小了，看起来像钻石。

抗锯齿需要一些额外的像素来处理，而如此小的形状并不能提供太多。除非您放大图像，否则它们不会得到抗锯齿。

【讨论】：

【解决方案4】：

我只在 Safari 6 中对此进行了测试，但添加相同颜色的抗锯齿笔触似乎有所帮助：

<polygon fill='blue' stroke='blue' stroke-width='3' stroke-antialiasing='true' … >

【讨论】：