SVG路徑字符串的布爾操作

Question

我遇到了一個概念上難以解決的問題。

總之，我需要找到通過不同布爾操作組合的兩條向量路徑的向量路徑。如聯盟，差異，交叉點和減法。如果我能做到這一點，就好像Canvas做到了globalCompositeOperation一樣。

我該怎麼去做這件事？

Answer 1

有一個JavaScript庫允許在路徑是一個多邊形的條件下對SVG路徑進行布爾操作。使用足夠高的採樣率，貝塞爾曲線可以被多邊形化爲如此高的質量，以至於視覺效果幾乎與真實曲線相同。

庫被稱爲JavaScript Clipper，它是Angus Johnson's Clipper（Delphi編寫的，C++，C＃和Python），端口而這又是基於Bala R. Vatti's clipping algorithm.它能夠處理所有多邊形情況下，包括自相交的人。該庫有許多額外的功能，包括所有布爾操作和用於減少節點數的節點亮化算法。

Answer 2

相當於globalCompositeOperation是SVG中的feComposite過濾器。這裏的an example看起來類似於在Opera中工作的this in canvas。

Answer 3

如果您需要創建新的幾何形狀，包含多個其他形狀相交，聯合等等，您必須自己在腳本中處理它，或使用矢量圖形編輯器（Inkscape和Illustrator都提供這個功能）爲你做到這一點。