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

Question

我正在使用Raphael库与SVG合作.我可以将填充颜色应用于对象,如下所示:

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

这也有效(尽管Raphael文档没有提到它):

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

我可以使用透明PNG作为填充图案,透明度可以按预期工作.svg对象是完全透明的,其中填充图案图像是透明的.但我想要做的是指定填充图案图像和填充颜色,以便颜色显示图案图像透明的位置 - 例如,类似于使用CSS的'background'属性.这可能与SVG有关吗？

Answer 1

您可以定义一个模式,其中包含带填充的矩形,以及一个在该矩形顶部的png图像.然后使用该图案作为圆的填充(或任何您想要的元素).

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

我应该说,如果你想让它与IE <9一起使用,那么你可能也需要在VML中实现它.

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