Rapha中的剪辑路径ël.js

您可以通过路径绘制的形状来切割一个孔。这是一种被称为甜甜圈孔的技术，你可以在我的索引页上看到一个例子如果这看起来很困难，那就不是查看信息数据库和标记为甜甜圈孔的技术我的网站索引是http://www.irunmywebsite.com/呃，以前是这样。现在你可以找到一个多剪辑路径（想象一下，看到一个视图穿过几个洞）旋转木马和缩略图支架只是一条路径。。。查看Raphael Crousel

下面是一个更好的例子。中央的蓝色区域有几个洞，有多种用途。它是我所说的DOM/SVG混合解决方案的一部分。

出于各种原因切割多用途孔

我认为你不能通过拉斐尔来做到这一点。您可以通过直接操作DOM来实现这一点，但您将失去为该元素调用Raphael方法的能力。

现在IE支持SVG，我觉得Raphael有点过时了。使用简单的javascript和SVG规范可以做更多的工作。

如果像示例图像中那样，它是您试图剪辑的光栅图像（png、gif、jpg…位图像素图像），那么实际上非常容易。在Raphael 2中，只需将填充设置为指向图像文件。它将其用作背景图像。

如果要裁剪具有拉斐尔路径或形状的图像或照片（如图像文件的剪裁遮罩或剪裁路径），只需将图像设置为路径的填充即可。

somepath.attr({fill: 'someimage.png'});

限制（AFAIK）：

• 每个路径只有一个图像
• 每个图像只有一个路径（对复杂遮罩使用复合路径）
• 背景职位之类的事情并不容易-查看此问题了解更多信息
• 我认为无法阻止图像的重复