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包含背景色，以便它不透明。