svg - SVG对象可以同时具有填充颜色和填充图案吗？

Question

我正在使用Raphael库处理SVG。我可以将填充颜色应用于对象，如下所示:

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

而且这也有效(尽管Raphael文档未提及):

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

我可以使用透明的PNG作为填充样式，并且透明可以按预期工作。 svg对象是完全透明的，其中填充图案图像是透明的。但是我想做的是同时指定填充图案图像和填充颜色，以使该颜色显示在图案图像透明的地方-例如，类似于使用CSS的“background”属性。 SVG是否可能？

Answer 1

您可以定义一个模式，该模式具有一个带有填充色的rect，以及一个在该rect上方是png的图像。然后将图案用作圆(或所需的任何元素)的填充。

这意味着您可以走出拉斐尔(Raphaël)，或将其扩展为您想要做的事情。注意({fill: "url(pattern.png)"})所做的是创建一个pattern元素，并添加一个指向给定url的image元素。破解Raphaël也很可能允许您也传递一种颜色，然后在创建图案的代码中通过创建与给定填充颜色的图像具有相同尺寸的矩形来处理该颜色。

我应该说，如果您希望它与IE <9一起使用，那么您可能也需要在VML中实现它。

其他选项包括绘制两个形状，一个用颜色填充，另一个用光栅图像填充。还有一个方法是使png包含背景色，以使其不透明。