SVG 对象可以同时具有填充颜色和填充图案吗？
我正在使用 Raphael 库来处理 SVG。我可以将填充颜色应用于对象，如下所示：
circle.attr({fill: "#ff0000"});
这也有效（尽管 Raphael 文档没有提及）：
circle.attr({fill: "url(pattern.png)"});
我可以使用透明 PNG 作为填充图案，并且透明度按预期工作。 svg 对象是完全透明的，其中填充图案图像是透明的。但我想做的是指定填充图案图像和填充颜色，以便颜色可以通过图案图像透明的位置显示 - 例如，类似于使用 CSS 的“背景”属性。这可以用 SVG 实现吗？
I'm working with SVG using the Raphael library. I can apply a fill colour to an object like so:
circle.attr({fill: "#ff0000"});
And this also works (though the Raphael documentation doesn't mention it):
circle.attr({fill: "url(pattern.png)"});
I am able to use transparent PNGs as fill patterns, and transparency works as expected. The svg object is completely transparent where the fill pattern image is transparent. But what I would like to do is specify both a fill pattern image and a fill colour, so that the colour would show through where the pattern image is transparent - similar to the 'background' property using CSS, for example. Is this possible with SVG?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以定义一个具有填充矩形的图案，以及该矩形顶部的 png 图像。然后使用该图案作为圆圈（或任何您想要的元素）的填充。
这意味着走出拉斐尔，或者扩展它来做你想做的事。请注意，
({fill: "url(pattern.png)"})的作用是创建一个模式元素并附加一个指向给定 url 的图像元素。很有可能破解 Raphaël，允许您也传递颜色，然后您可以在创建图案的代码中处理该颜色，方法是创建一个与具有给定填充颜色的图像尺寸相同的矩形。我应该说，如果您希望它与 IE<9 一起工作，那么您可能也需要在 VML 中实现它。
其他选项包括绘制两个形状，一个使用颜色填充，另一个使用光栅图像填充。另一种方法是使 png 包含背景颜色，使其不透明。
You can define a pattern that has a rect with a fill, and an image that is your png on top of that rect. Then use the pattern as fill for the circle (or whatever element you want).
This means stepping outside of Raphaël, or extending it to do what you want. Note that what
({fill: "url(pattern.png)"})does is to create a pattern element and and append an image element pointing to the given url. It's quite possible to hack Raphaël to allow you to pass a color too, and then you deal with that in the code that creates the pattern by creating a rect of the same dimensions as the image with the given fill color.I should say that if you want it to work with IE<9 then you probably need to implement it in VML too.
Other options include drawing two shapes, one with color fill and the other with the raster image fill. Yet another is to make the png include the background color so that it's not transparent.