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

问题描述

我想绘制一个带有孔的形状，这样我就可以fill对其进行形状，而没有用该颜色填充孔(将它们保持透明).

根据 W3路径规范:

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

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

非常感谢.

解决方案

如果您知道窍门，那么事实将非常简单.例如这不起作用:

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中使用

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).

According to the W3 path spec:

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

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

Thanks very much.

解决方案

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

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

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.

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

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