利用SVG中的对称性;误解或错误的渲染器实现

想想任何类型的渲染引擎都必须如何渲染SVG。它逐步遍历SVG，一次绘制一个元素。

除非该形状是正好符合像素边界的直线或矩形，否则它需要平滑该形状的边缘。它使用一种称为蚂蚁混叠的技术来实现这一点。它绘制半透明像素，以近似于仅部分覆盖像素的边缘。

例如，如果一个形状正好覆盖半个像素，则渲染器将使用50%的alpha将颜色绘制到该像素中。

然后它继续移动并绘制下一个形状。即使这个形状有一个数学上一致的边界，你也可能不会得到一个完美的连接。

原因如下。

想象三个相邻的像素，其中形状的边缘正好穿过中心像素的一半。

+--------+--------+--------+
First shape drawn:   |  100%  |   50%  |    0%  |
+--------+--------+--------+

这里的百分比表示绘制到每个像素中的形状的颜色量。左侧像素为100%。中间像素中的50%颜色(alpha)。并且没有将颜色绘制到右侧像素中。

现在想象一个与第一个形状共享边界的第二个形状。你可能会想象，会发生以下情况。

+--------+--------+--------+
First shape drawn:   |  100%  |   50%  |    0%  |
+--------+--------+--------+
Second shape drawn:  |    0%  |   50%  |  100%  |
+--------+--------+--------+
Resulting image:     |  100%  |  100%  |  100%  |
+--------+--------+--------+

但事实并非如此。第一个形状已经渲染为像素。渲染器对以前绘制的东西的形状没有记忆。它只有以前渲染的像素的颜色。

当它在第一步或第二步绘制中间像素时，它会将50%的新颜色与像素值混合。公式大致如下：

result = 0.5 * old_pixel_colour + 0.5 * new_pixel_colour

例如，让我们以上面的像素百分比为例，想象我们在白色背景上绘制两个红色形状。

绘制第一个形状后，像素应该看起来像这样。

rgb(255, 0, 0)         rgb(255, 128, 128)        rgb(255, 255, 255)
[0 * bg + 1.0 * red]  [0.5 * bg + 0.5 * 50%_red]  [1.0 * bg + zero_red]

其中bg表示像素开始时的白色背景颜色。50%_red表示抗锯齿用于表示半覆盖像素的50%透明红色。

第二次通过后，像素将看起来像这样：

rgb(255, 0, 0)            rgb(255, 192, 192)          rgb(255, 0, 0)
[1.0 * first + no_red]  [0.5 * first + 0.5 * 50%_red]  [0 * first + 1.0 * red]

其中first表示在绘制第一形状之后的像素的颜色。我希望这是有道理的。

或者以颜色百分比(红色)表示。

+--------+--------+--------+
First shape drawn:   |  100%  |   50%  |    0%  |
+--------+--------+--------+
Second shape drawn:  |    0%  |   50%  |  100%  |
+--------+--------+--------+
Resulting image:     |  100%  |   75%  |  100%  |
+--------+--------+--------+

所以我希望你能明白为什么这些边界像素最终会显示出一条微弱的白线。这是因为您正在混合两层抗锯齿像素。它实际上是一条浅红线。

因此，渲染器可以分析形状堆栈的像素覆盖率。但这在数学上非常复杂。这将大大减慢渲染过程。