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

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

最简单的解决方案是从页面中“不要抬起笔”来绘制形状 - 换句话说，通过构造路径字符串只在开头使用一个“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");

RaphaelJS填充路径部分甜甜圈

1 个答案: