svg - 平滑重叠的笔划边缘

Question

我正在使用 Raphael 绘制弧线，如下图所示：

Z-index 的顺序是从低到高：灰色、蓝色、绿色。灰色和蓝色弧线都从顶部开始，绿色弧线从顶部开始。

有什么方法可以改善边缘吗？尤其是蓝色的绿色。

谢谢你。

Answer 1

问题是您正在重叠形状。这会导致一些颜色从下面溢出。要解决这个问题，您需要在前一个结束的地方开始每个弧。

您可能会得到非常微弱的间隙，这可以通过对每个弧线应用 1px 笔划轻松解决。

Answer 2

恐怕你无能为力。如何呈现形状取决于查看器（浏览器、图像查看器或导入应用程序）。您可以使用渲染属性，看看这是否会给您带来改进，但我相信几乎没有任何 SVG 实现支持它们。

Answer 3

我不确定你的意思，而且如果没有 raphael 代码，很难知道你是如何制作图像的。您是在谈论绿色弧的外边缘略微超出蓝色弧的外边缘的方式吗？我会检查两条路径的角点是否相同，并在路径计算中包括笔画宽度。

也许您可以尝试将笔画宽度减小到 0 以使事情变得更容易。