RaphaelJS 填充路径部分甜甜圈

Question

这是我尝试填充路径时的当前结果： screenshot .

请注意笔触正确，但填充错误：jsfiddle .

我查看了填充规则，但这似乎没有多大作用。 我猜问题更多是因为我的形状没有正确闭合。

请帮忙！

这是上面生成的 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>

Answer 1

小甜甜圈的路径被绘制成在页面上跳跃的四个部分，在确定形状的内部和外部时，这似乎使 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，将线绘制到内部曲线的底部，顺时针绘制内部曲线，然后与原点重新连接。请注意，内部曲线需要第二个布尔值“sweep flag”从 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");