如何在拉斐尔的路径中实现“甜甜圈洞" [英] How to achieve 'donut holes' with paths in Raphael

问题描述

我想画一个有洞的形状，这样我就可以填充它的形状，而不是用那种颜色填充洞(让它们透明).

I'd like to draw a shape which has holes in it such that I can fill the shape it and not have the holes filled with that colour (leave them transparent).

根据 W3 路径规范:

复合路径(即具有多个子路径的路径)可以允许在对象中产生诸如甜甜圈洞"之类的效果.

Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects.

有人可以举一个非常简单的例子来说明如何使用 Raphael 中的矢量路径执行此操作吗?

Can somebody please give a very simple example of how to perform this with a vector path in Raphael?

非常感谢.

推荐答案

如果您知道其中的诀窍，就会变得非常简单.例如这不起作用:

This turns out to be quite straightforward if you know the trick. For example 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");

但是这确实有效*:

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 上发现的花絮存档.

The difference is that for the donut to appear the the inner path has to have it's vertices drawn in reverse order to the outer path (ie. draw one clockwise, the other anti-clockwise). A tidbit I found on the text.xml.svg.devel archives.

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

(*) At least, it works in Chrome, Opera and Firefox 4.0 beta, but not in 3.6

这篇关于如何在拉斐尔的路径中实现“甜甜圈洞"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！