如何使用Raphael.js繪制“透明筆畫”

Question

我正在嘗試繪制圖形的路徑，以便該路徑是透明的，而畫布的其余部分則不是。 這樣，我可以將畫布用作遮罩，並使用html元素用不同的顏色填充路徑。 有點像這樣：

Answer 1

無法通過Raphael本地實現此目的，但是可以通過對Raphael生產的SVG進行選擇性修改來實現。 考慮使用應用於路徑的蒙版 。 此技術在這里用於絕對美味的視覺效果。

不要忘記，您可以通過該紙張對象的canvas屬性訪問與Raphael紙張對象關聯的DOM節點（我不知道為什么Baranovskiy選擇了這樣一個令人誤解的名稱！）。 您可以使用它直接與DOM中的SVG進行交互，盡管我不能保證Raphael與自定義修改之間的交互=）

Answer 2

要僅填充路徑的外部，您將必須繪制由兩個路徑字符串組成的通常稱為“甜甜圈”的東西。

您將在此處找到一個很好的示例： 如何在Raphael中使用路徑實現“甜甜圈洞” 。

這個想法是：*給外部路徑字符串一個大的逆時針閉合矩形，告訴瀏覽器必須填充的是內部內容*將內部路徑字符串作為您想要的順時針閉合路徑，告訴瀏覽器需要填充的是外面的東西。

因此，形成帶有孔的填充形狀，該孔是兩個填充形狀的交點。