Vector 如何实现'；甜甜圈孔'；拉斐尔的道路

我想画一个有洞的形状，这样我可以

填充它的形状，而不是用那种颜色填充洞（保持透明）

根据报告：

复合路径（即，具有多个子路径的路径）可以允许对象中出现“圆环孔”等效果

有人能给出一个非常简单的例子，说明如何使用中的向量路径执行此操作吗

非常感谢。
如果你知道诀窍的话，这就很简单了。例如：

但是*：

不同之处在于，为了使甜甜圈看起来像一个圆环，内部路径的顶点必须按与外部路径相反的顺序绘制（即，顺时针绘制一个，逆时针绘制另一个）。我在报纸上找到的一条新闻

（*）至少，它在Chrome、Opera和Firefox 4.0 beta版中可以工作，但在3.6版中不能工作。要在Firefox 3.6中工作，您需要关闭漏洞；i、 e.在定义内边界时，使坐标重新连接到自身。奇怪的是，这对于外部边界似乎不是必需的

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”。请看一下：

不要试图将其设置为“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');

我已经在复杂的路径上使用了它，并取得了成功。
对于任何想要做圆形甜甜圈的人来说，非常简单的插件

要点：

我正在尝试使用这种技术填充圆形甜甜圈，你知道如何让圆形函数反向绘制以使其正确填充吗？@Neil据我所知，你必须使用路径来完成这项工作。@robertc感谢我确实通过路径实现了这一点，感谢你的提示。我正要问同样的问题。结果（坐标不同）可以在这里看到：Hi@robertc。我在寻找与你相反的解决方案。这里是我的问题：事实上，这并不是拉斐尔特有的，而是SVG更一般的。我在寻找与你相反的解决方案。这是我的问题：我只是想对此进行非jQuery更新：
path[0].setAttribute（'fill-rule'，'evenodd'）工作
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");

// 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');

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');
};