5

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

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

4 回答 4

6

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

但是，如果像下面这样将笔划设置为“无”，则边缘的平滑度会产生很大差异。

    var circle = paper.circle(50, 40, 20);
    circle.attr("fill", "#F00");
    circle.attr("stroke", "none");
于 2011-10-03T11:51:22.073 回答
2

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

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

于 2010-06-19T16:34:14.410 回答
0

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

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

于 2010-06-18T17:59:16.233 回答
0

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

<polygon fill='blue' stroke='blue' stroke-width='3' stroke-antialiasing='true' … >
于 2014-06-06T21:41:10.460 回答