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

Question

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

Answer 1

无法通过Raphael本地实现此目的，但是可以通过对Raphael生产的SVG进行选择性修改来实现。 考虑使用应用于路径的蒙版 。 此技术在这里用于绝对美味的视觉效果。

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

Answer 2

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

您将在此处找到一个很好的示例： 如何在Raphael中使用路径实现“甜甜圈洞” 。

这个想法是：*给外部路径字符串一个大的逆时针闭合矩形，告诉浏览器必须填充的是内部内容*将内部路径字符串作为您想要的顺时针闭合路径，告诉浏览器需要填充的是外面的东西。

因此，形成带有孔的填充形状，该孔是两个填充形状的交点。