抗锯齿、Web SVG 和 Raphaël.js
我使用 Raphaël.js 绘制一些小圆圈（2-4px 半径），这是通过 SVG 在除 IE 之外的所有浏览器上完成的。这些圆圈对我来说看起来并不光滑，所以我的问题是：
- 是否有某种方法可以向 Raphaël.js 添加抗锯齿功能？
- 除此之外，是否有某种方法可以对 SVG 对象进行抗锯齿处理？
I'm using Raphaël.js to draw some small circles (2-4px radius), which is done through SVG on all browser except IE. The circles don't look smooth to me, so my question is:
- Is there some way to add antialiasing to Raphaël.js?
- Barring that, is there some way to antialias SVG objects?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我也在寻找答案时偶然发现了这篇文章。在尝试将笔画设置为较浅的颜色后，我发现它只是让它看起来模糊。
但是，如果将描边设置为“无”（如下所示），则会对边缘的平滑度产生很大影响。
I stumbled across this post while looking for an answer too. After trying to set the stroke at a lighter colour I found that it just made it look blurry.
However, if you set the stroke to "none" like below, it makes a big difference in the smoothness of the edges.
经过进一步的实验，我认为问题并不在于 SVG 没有抗锯齿（事实上，我发现在绘制线条时我通常想通过将 shapeRendering 设置为 crisp-edges 来禁用抗锯齿） ; 请参阅此问题），因为我想要更流畅我的圆圈上的边缘比提供的抗锯齿效果要好。
要在 Raphaël.js 中实现此目的，您可以分别设置
填充和描边颜色。例如，在白色背景上，将描边设置为比填充更浅的颜色即可达到所需的效果。On further experimentation, I think the trouble is not so much that the SVG was not antialiased (indeed, I found when drawing lines that I usually wanted to disable antialiasing by setting
shapeRenderingtocrisp-edges; see this issue) as that I wanted even smoother edges on my circles than the antialiasing provided.To achieve this in Raphaël.js, you can set the
fillandstrokecolors separately. For instance, on a white background, setting thestroketo a lighter color than thefillachieves the desired effect.抗锯齿是通过 SVG 渲染器完成的，因此您需要查看显示 SVG 的客户端。然而，问题在于您所绘制的内容太小，无法很好地进行抗锯齿处理。如果你有一个 2px 半径的圆，它基本上会渲染为菱形，因为这是你能得到的最接近该尺寸圆的圆。半径的第一个像素用于圆的核心，第二个像素用于提供一点圆角，但它太小了，看起来像一个菱形。
抗锯齿需要一些额外的像素来工作，而如此小的形状并不能提供太多。除非您放大图像，否则它们不会被抗锯齿。
Antialiasing is done via the SVG renderer, so you'd need to look at the client that is showing the SVG. The problem, however, is that what you're drawing is too small to be antialiased well. If you've got a 2px radius circle it's basically rendered as a diamond because that's the closest you can get to a circle at that size. The first pixel of radius is used for the core of the circle, the second pixel used to give a little bit of rounding, but it's so small that it looks like a diamond.
Anti-aliasing needs some extra pixels to work with and such small shapes don't provide much. Unless you scale up your images, they won't get antialiased.
我只在 Safari 6 中对此进行了测试，但添加相同颜色的抗锯齿描边似乎有所帮助：
I've only tested this in Safari 6 but adding an anti-aliased stroke of the same color seemed to help: