我试图理解像浏览器这样的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>
的意思是:该代码用于绘制SVG图形,其中第一行绘制了一个A的身体,第二行绘制了一个圆形,第三行从第一行中切割了一个三角形,第四行从第二行中切割了一个小圆形。问题是,SVG程序如何理解在第二行通过绘制一个形状来理解,而在现有形状上裁剪形状呢?显然答案是如果路径在另一个路径之内,则进行裁剪,否则进行绘制。但是这并不是整个情况,因为首先需要进行大量计算才能确定路径是否在另一个路径之内,其次路径的顺序也不重要(裁剪路径不一定在绘制路径之后)。这当然不仅限于SVG,其他矢量格式例如EPS也是如此。为了增加实用性,请阅读问题时将其视为:如何解析(使用任何编程语言)上述d元素以找出哪个路径在给定的SVG中绘制(黑色),哪个路径在裁剪(白色)?