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

Question

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

9

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

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

这种方法也可以使用（尽管 Raphael 文档没有提到）：

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

我能够使用透明的PNG作为填充图案，并且透明度按预期工作。在填充图案图像透明的地方，SVG对象完全透明。但是我想做的是指定填充图案图像和填充颜色，以便颜色会显示在图案图像透明的地方 - 类似于使用CSS的'background'属性。这在SVG中是否可能？

- shipshape

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik Dahlström · Accepted Answer

您可以定义一个具有填充的矩形和作为顶部的PNG图像的模式。然后将该模式用作圆（或任何您想要的元素）的填充。

这意味着不局限于Raphaël，或扩展它以实现您想要的功能。请注意，({fill: "url(pattern.png)"})的作用是创建一个Pattern元素，并附加一个指向给定URL的Image元素。很可能会修改Raphaël以允许您同时传递颜色，并通过在创建填充模式的代码中创建与带有给定颜色的图像相同尺寸的矩形来处理它。

需要注意的是，如果您想使其在IE<9中工作，则可能还需要在VML中实现它。

其他选项包括绘制两个形状，一个使用颜色填充，另一个使用栅格图像填充。还有一种方法是使PNG包含背景颜色，这样它就不会透明。