如何用Raphael.js绘制“透明笔画”

Question

我正在尝试绘制图形的路径，以便路径是透明的，而画布的其余部分则不是。这样我就可以使用画布作为蒙版，并使用html元素用不同的颜色填充路径。有点像这样：

  

     

Answer 1

没有办法通过Raphael本地实现这一目标，但可以通过对Raphael制作的SVG进行一些选择性修改来实现。考虑使用应用于路径的mask。这种技术用于绝对美味的视觉效果here。

不要忘记您可以通过该纸质对象的canvas属性访问与Raphael纸质对象相关联的DOM节点（我不知道为什么Baranovskiy选择了这样一个误导性的名称！）。您可以使用它直接与DOM中的SVG进行交互，但我无法保证Raphael和自定义修改之间的交互=）

Answer 2

要仅填充路径的外部部分，您必须绘制通常称为“甜甜圈”的两个路径字符串。

你会在这里找到一个很好的例子：How to achieve 'donut holes' with paths in Raphael。

这个想法是： *将外部路径字符串作为一个大的逆时针闭合矩形，告诉浏览器必须填充的内容是什么 *将内部路径字符串连接成您想要的顺时针关闭路径，告诉浏览器必须填充的内容是什么。

因此产生一个带有孔的填充形状，这是两个填充形状的交叉点。