SVG / EPS（向量）如何用另一条路径剪切一条路径？

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。 Googlebot想要引起更多关注来回答这个问题。

我试图了解SVG程序（如浏览器）如何通过给定的路径绘制形状。我很难理解如何绘制路径以及如何修剪形状的一部分。

例如，考虑字母Å和带有顶环的A。 SVG代码就像

<svg viewBox="0 0 1800 1800" xmlns="http://www.w3.org/2000/svg">
<path 
d="
M484 0l-42 137h-245l-47 -137h-147l237 664h161l234 -664h-151z
M426 822q0 -47 -24 -71.5t-80 -24.5q-104 0 -104 96q0 46 25.5 71t78.5 25q56 0 80 -25t24 -71z
M319 515h-1l-85 -264h169z
M374 822q0 51 -52 51q-50 0 -50 -51q0 -49 50 -49q52 0 52 49z
" />
</svg>

JSFIDDLE

• 第一行：绘制A的主体。
• 第二行：画一个顶圆。
• 第三行：从第一行开始剪裁一个三角形。
• 第四行：从第二行剪切一个小圆圈。

我的问题是：SVG程序如何理解第二行绘制形状，但是从现有形状中剪切形状？

显然，答案是：如果路径在另一个路径内，它将剪切，否则将绘制。

有两个原因使我认为这不是整体情况：

1. 它需要进行大量计算才能确定一条路径是否在另一条路径内。
2. 线的顺序并不重要（剪切路径不一定在绘制路径之后）。

当然，这不限于SVG，因为其他矢量格式，例如EPS也是一样。

要添加务实的观点，请阅读以下问题：上面SVG中给出的四个路径中的哪一个？

Answer 1

广义上讲，您根本不解析路径。

而是以当前分辨率将每个路径“扫描转换”为一系列矩形。每个反角可能只有一个像素高，并且在给定的y值处可能有多个矩形。

对要填充或描边的路径以及要应用为剪辑的路径执行此操作，然后与一系列矩形相交。显然，这是一个简单得多的任务。然后填充矩形。

当然，这确实会产生仅在给定分辨率下正确的结果。更改分辨率，您将获得一系列不同的矩形。但是，它会以适当的速度产生正确的输出。相交两条任意路径以生成一条新的任意路径显然是一项更为复杂的任务，并且为了绘制结果，我们不需要执行任何一条。