我想画一个有洞的形状，这样我就可以fill 画它的形状，而不是用那种颜色填充洞（让它们透明）。
根据W3 path spec：
复合路径（即具有多个子路径的路径）可以在对象中产生诸如“甜甜圈洞”之类的效果。
有人可以举一个非常简单的例子来说明如何使用Raphael 中的矢量路径来执行此操作吗？
非常感谢。
【问题讨论】：
如果您知道诀窍，这会变得非常简单。例如this doesn't work:
paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
" M 75 75 L 75 125 L 125 125 L 125 75 z")
.attr("fill", "#f00");
但是this does work*：
paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
" M 75 75 L 125 75 L 125 125 L 75 125 z")
.attr("fill", "#f00");
不同之处在于，要让甜甜圈出现，内部路径的顶点必须以与外部路径相反的顺序绘制（即，顺时针绘制一个，逆时针绘制另一个）。我在text.xml.svg.devel archives上发现的一个花絮。
(*) 至少，它适用于 Chrome、Opera 和 Firefox 4.0 beta，但不适用于 3.6
【讨论】：
要在 Firefox 3.6 中实现这一点，您需要关闭漏洞；即在定义内部边界时使坐标重新连接。奇怪的是，这对于外部边界似乎没有必要。
paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
" M 75 75 L 125 75 L 125 125 L 75 125 L 75 75 z")
.attr("fill", "#f00");
只是一个简短的注释来跟进评论 - 顺时针/逆时针概念起初可能看起来很奇怪，但它在整个 GIS/CAD 技术中是相当标准的。
【讨论】：
我认为正确的方法是将属性“fill-rule”设置为值“evenodd”。看看svg spec：
不要尝试用“Raphael.Element.attr()”来设置它。它不起作用。我改用 jQuery.attr() 函数：
// assuming paper is a Raphael.Paper object
path = paper.path('Mx,y{some path commands for the main shape}Z'
+'Mx,y{some path commands for the hole}Z'
);
// this doesn't work
path.attr({'fill-rule': 'evenodd'});
// neither this
path.attr({fillRule: 'evenodd'});
// if you inspect the object returned by paper.path
// you can see it has a reference to the DOM element
console.debug(path)
// so a bit of jQuery and it's done
$(path[0]).attr('fill-rule', 'evenodd');
我已经在复杂的路径上使用它并取得了成功。
【讨论】：
path[0].setAttribute('fill-rule', 'evenodd'); 有效
对于任何想要做圆形甜甜圈的人，非常简单的插件Raphael-donut-plugin
要点：
Raphael.fn.donut = function(x, y, innerRadius, outerRadius) {
y -= outerRadius;
return this.path('M'+x+' '+y+'a'+outerRadius+' '+outerRadius +
' 0 1 0 1 0m-1 '+
(outerRadius - innerRadius)+
'a'+innerRadius+' '+innerRadius+
' 0 1 1 -1 0');
};
【讨论】：