抗锯齿,网络SVG和Raphaël.js

Question

我正在使用Raphaël.js绘制一些小圆圈(2-4px半径),这是通过SVG在除IE之外的所有浏览器上完成的.圆圈看起来不顺利,所以我的问题是:

1. 有没有办法为Raphaël.js添加抗锯齿？
2. 除此之外,是否有一些方法可以对抗SVG对象？

Answer 1

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

但是,如果将笔划设置为"无",如下所示,则会使边缘的平滑度产生很大差异.

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

Answer 2

在进一步的实验中，我认为问题并不在于 SVG 没有抗锯齿（事实上，我发现在绘制线条时我通常想通过设置为禁用抗锯齿shapeRendering；crisp-edges请参阅此问题），而是我想要在我的图像上有更平滑的边缘圆圈比提供的抗锯齿功能要大。

\n\n

要在 Rapha\xc3\xabl.js 中实现此目的，您可以分别设置fill和stroke颜色。例如，在白色背景上，将 设为stroke比 更浅的颜色即可fill达到所需的效果。

\n