SVG对象可以同时具有填充颜色和填充样式吗？
SVG对象可以同时具有填充颜色和填充样式吗？
提问于 2011-07-07 10:05:10
我正在使用Raphael库处理SVG。我可以对对象应用填充颜色，如下所示：
circle.attr({fill: "#ff0000"});这也是可行的(虽然拉斐尔文档没有提到这一点)：
circle.attr({fill: "url(pattern.png)"});我可以使用透明的PNG作为填充样式，并且透明效果和预期的一样。svg对象是完全透明的，其中填充图案图像是透明的。但我想要做的是指定填充图案图像和填充颜色，这样颜色就可以通过图案图像透明的位置显示出来-例如，类似于使用CSS的“背景”属性。SVG可以做到这一点吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-07-07 15:45:05
您可以定义一个模式，其中包含一个带有填充的rect，以及一个位于该rect顶部的png图像。然后使用图案作为圆的填充(或任何你想要的元素)。
这意味着走出Raphaël，或者扩展它来做你想做的事情。请注意，({fill: "url(pattern.png)"})所做的是创建一个pattern元素，并附加一个指向给定url的图像元素。很有可能破解Raphaël来允许你传递一种颜色，然后你可以在创建模式的代码中处理这个问题，方法是创建一个与给定填充颜色的图像具有相同尺寸的矩形。
我应该说，如果你想让它与IE<9一起工作，那么你可能也需要用VML语言来实现它。
其他选项包括绘制两个形状，一个使用颜色填充，另一个使用光栅图像填充。另一种方法是使png包含背景颜色，这样它就不是透明的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6605078
复制相关文章
相似问题
腾讯云开发者
