SVG對象可以同時具有填充顏色和填充圖案嗎？

Question

我正在使用使用Raphael庫的SVG。我可以應用填充顏色的對象，像這樣：

circle.attr({fill: "#ff0000"}); 

而且這也適用（儘管拉斐爾文檔中並沒有提到它）：

circle.attr({fill: "url(pattern.png)"}); 

我能夠使用透明的PNG作爲填充圖案和透明度按預期工作。 svg對象在填充圖案圖像透明的地方是完全透明的。但我想要做的是指定填充圖案圖像和填充顏色，以便顏色顯示圖案圖像透明的位置 - 例如，類似於使用CSS的「背景」屬性。這可能與SVG？

Answer 1

你可以定義一個模式，它有一個填充矩形和一個在你的矩形之上的png圖像。然後使用該模式作爲填充的圓圈（或任何你想要的元素）。

這意味着走出Raphaël，或延伸到做你想做的。請注意，({fill: "url(pattern.png)"})所做的是創建一個模式元素，並附加指向給定url的圖像元素。對Raphaël進行攻擊是很有可能的，你也可以通過一種顏色來處理，然後通過創建與給定填充顏色相同尺寸的矩形來創建模式。

我應該說，如果你想讓它與IE < 9一起工作，那麼你可能也需要在VML中實現它。

其他選項包括繪製兩個形狀，一個填充顏色，另一個填充光柵圖像。另一個是讓png包含背景色，以便它不透明。