如何用Raphael.js繪製「透明筆畫」

我正在嘗試繪製圖形的路徑，以便路徑是透明的而畫布的其餘部分不是。這樣我可以使用畫布作爲蒙版，並使用html元素填充不同顏色的路徑。有點像這樣：如何用Raphael.js繪製「透明筆畫」

2013-04-12 Michael

也許這會工作？ http://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha –

我不是Raphaeljs專家，但你可以在[documentation page]（http：// raphaeljs）上查看'stroke-opacity'。 COM /＃的reference.html Element.attr）。 – fernandosavio

是的，問題是用純色填充紙張的其餘部分（減去路徑）。 – Michael

有沒有辦法通過本地拉斐爾實現這一點，但它可能由拉斐爾產生的SVG的一些選擇性修改來實現。考慮使用應用於路徑的mask。這種技術被用於絕對美味的視覺效果here。

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

2013-04-16 17:29:22

感謝您的建議，凱文！無論如何，我並沒有用Raphael做太多繁重的工作，所以我可以堅持使用SVG。無論如何，在這個應用程序中不支持IE;） – Michael

要僅填充路徑的外部部分，您必須繪製通常被稱爲由兩個路徑字符串組成的「甜甜圈」。

的理念是： *給外側通路字符串作爲逆時針大閉合矩形，告訴瀏覽器什麼必須要填寫的裏面是什麼 * CONCAT內路徑字符串，只要你想順時針閉合路徑，告訴瀏覽器需要填寫什麼是外面的東西。

因此產生具有孔的填充形狀，該孔是兩種填充形狀的相交。

2013-04-16 18:30:49 lib3d

回答