如何在拉斐尔的路径上实现"甜甜圈洞"

Question

我想绘制一个有孔的形状,这样我就可以fill塑造它而不会让孔充满那种颜色(让它们保持透明).

根据W3路径规范:

复合路径(即,具有多个子路径的路径)可以允许诸如对象中的"环形孔"之类的效果.

有人可以举一个非常简单的例子说明如何在拉斐尔用矢量路径执行此操作吗？

非常感谢.

Answer 1

如果你知道这个诀窍,那么事情就会变得非常简单.例如,这不起作用:

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");

但这确实有效*:

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档案中找到的一个小问题.

(*)至少,它适用于Chrome,Opera和Firefox 4.0 beta,但不适用于3.6