Path RaphaelJS填充路径部分圆环

这是我尝试填充路径内部时得到的当前结果：

请注意，笔划正确，但填充不正确：

我看过填充规则，但似乎没什么作用。 我猜问题更多的是我的形状没有正确闭合

请帮忙

这是为上述内容生成的svg：

<svg height="75" version="1.1" width="150" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: 0px; top: 0px;"><desc>Created with Raphaël 2.1.0</desc><defs/>
<path style="" fill="#949598" stroke="#000000" d="M75,75L150,75.00000000000001A75,75,0,0,0,0,74.99999999999999M75,75L45,75A30,30,0,1,1,105,75.00000000000001Z" stroke-width="0"/>
<path style="fill-opacity: 1.2;" fill="#c9532f" stroke="#00ff00" d="M75,75M48.144896960365074,4.972837836089695A75,75,0,0,0,0,74.99999999999999M75,75M64.25795878414603,46.989135134435884A30,30,0,0,0,45,75M64.25795878414603,46.989135134435884L48.144896960365074,4.972837836089695M45,75L0,75Z" stroke-width="1" fill-opacity="1.2"/>
<circle cx="75" cy="75" r="5" fill="#333333" stroke="#000" style="" stroke-width="0"/>    
</svg>

使用Raphaël 2.1.0创建

小甜甜圈的路径分为四个部分，在页面上跳跃，这似乎让Raphael在确定形状的内部和外部时感到困惑。（我无法确切说出它是如何做出这一决定的。）

最简单的解决方案是，永远不要从页面上“提起笔”来绘制形状——换句话说，通过构造路径字符串，在开始时只使用一个“M”。这是不可能的，将所有的形状，但在您的情况下非常容易。在下面，我重新排列了路径，以便在不跳到新坐标的情况下将其绘制成碎片：

var p2 = paper.path("M48.1,5A75,75,0,0,0,0,75L45,75A30,30,0,0,1,64.2,47L48.1,5").attr("fill", "#c9532f");  

（为了便于阅读，我还对这些值进行了四舍五入。不需要有10位小数的像素值）

如您所见，这从同一位置开始，将外部曲线绘制为0,75，将直线绘制到内部曲线的底部，顺时针绘制内部曲线，然后与原始点重新连接。请注意，内部曲线需要第二个布尔值“”，该值从0更改为1，才能在相反方向正确绘制

总的来说，最好以手工绘制路径的方式（如果可能的话）构建路径，以便在重新审视它们时保持它们的连贯性

事情是这样的：

var paper = Raphael(0, 0, 800, 600);    
var p1 = paper.path("M75,75L150,75.00000000000001A75,75,0,0,0,0,74.99999999999999M75,75L45,75A30,30,0,1,1,105,75.00000000000001Z").attr("fill", "#949598");

var p2 = paper.path("M48.1,5A75,75,0,0,0,0,75L45,75A30,30,0,0,1,64.2,47L48.1,5").attr("fill", "#c9532f");  

var c = paper.circle(64.2,47, 5).attr("fill", "#333333");

---

非常感谢，从Raphael/SVG开始，这是一个很好的解释。