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

Question

我正在使用 Raphael 库处理 SVG。我可以像这样将填充颜色应用于对象：

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

这也有效（尽管 Raphael 文档没有提及）：

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

我可以使用透明 PNG 作为填充图案，并且透明度可以按预期工作。 svg 对象是完全透明的，其中填充图案图像是透明的。但我想做的是同时指定填充图案图像和填充颜色，这样颜色就会显示在图案图像透明的地方——例如，类似于使用 CSS 的“背景”属性。 SVG可以做到这一点吗？

Answer 1

您可以定义一个图案，其中包含一个带填充的矩形，以及一个位于该矩形顶部的 png 图像。然后使用图案作为圆圈的填充（或任何你想要的元素）。

这意味着要跳出 Raphaël，或者扩展它来做你想做的事。请注意，({fill: "url(pattern.png)"}) 所做的是创建一个模式元素并附加一个指向给定 url 的图像元素。很有可能破解 Raphaël 以允许您也传递颜色，然后您在创建模式的代码中通过创建与具有给定填充颜色的图像相同尺寸的矩形来处理它。

我应该说，如果您希望它与 IE

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