SVG/EPS(向量)如何通过另一条路径剪裁路径?

SVG/EPS(向量)如何通过另一条路径剪裁路径?,svg,vector,postscript,eps,Svg,Vector,Postscript,Eps,我试图理解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

我试图理解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>
第一行:绘制A的主体。 第二行:画一个顶圆。 第三条线:从第一条线剪裁三角形。 第四行:从第二行剪辑一个小圆圈。 我的问题是:SVG程序如何理解通过第二条线绘制形状,但从现有形状中剪裁形状

显然,答案是:如果路径在另一条路径内,它将进行剪辑,否则它将进行绘制

有两个原因使我认为这不是全部情况:

需要进行大量计算才能确定一条路径是否在另一条路径内。 线的顺序并不重要,剪裁路径不一定在图形路径之后。 当然,这并不局限于SVG,其他矢量格式(如EPS)也是如此


为了增加一个实用的视角,请将问题理解为:我们如何在任何编程语言中解析上述d元素,以找出在上述SVG中给出的四条路径中,哪条路径是黑色的,哪条路径是白色的?

广义地说,您根本不解析这些路径

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

对要填充或笔划的路径和要应用为剪辑的路径执行此操作,然后与一系列矩形相交。显然,这是一项简单得多的任务。然后填充矩形


当然,这确实会产生一个只有在给定分辨率下才正确的结果。改变分辨率,你会得到一系列不同的矩形。但是,它以适当的速度产生正确的输出。将两条任意路径相交以生成一条新的任意路径显然是一项复杂得多的任务,为了绘制结果,我们不需要执行此任务。

在下面的示例中,我将使用您示例中字母a的路径

在第一个svg元素中,字母A是从右向左绘制的,而孔的绘制方向是相反的:您得到了剪辑

在第二个示例中,我反转了绘制孔的部分。现在,这部分的绘制方向与字母A的主要部分相同。现在,您将无法获得剪裁

在第三个示例中,我使用了与前面相同的反向路径,但我添加了fill rule=evenodd,现在该孔已被剪裁,因为

svg{宽度:30%;边框:实心}
扫描转换的想法非常有用,但我仍然没有得到顺序独立性。在给定的分辨率下,程序查找第一条路径内的像素。然后,扫描转换第二条路径:如果像素位于前一条路径内,它将删除像素,否则,将添加它们。在这种情况下,路径的顺序应该很重要。是的,路径的顺序很重要。路径由渲染时生效的剪裁路径进行剪裁。如果以后更新剪裁路径,则不会更改渲染路径。新剪辑仅适用于后续操作。这绝对适用于EPS,我认为SVG也是如此。我理解了你关于方向影响的观点。但是,我没有得到绘制形状的通用算法。它真的是由方向决定的吗?那么,它的标准是什么?