Javascript 填充路径取决于绘图顺序

我需要用Raphaël.js在另一个三角形内画一个倒三角形。类似于以下ASCII艺术：

   /\
  /__\
 /\  /\
/__\/__\

唯一的区别是，我画它的侧面（顶部向右），以便对它应用旋转

根据我在

路径

字符串中绘制线条的顺序，中心可以使用填充颜色着色，也可以不使用填充颜色

HTML

<div id="paper"></div>

JavaScript（填充内部）

JavaScript（内部留空）

---

请注意，唯一的区别是前两点

// Fills the inside:
"M", x, y, "L", x + w, cy
// Doesn't fill the inside:
"M", x + w, cy, "L", x, y

---

是什么导致拉法尔行为不端？ 我如何事先确定是否要填写该数字？

---

演示：

---

只需在两块JavaScript之间切换注释。

它可能与填充规则有关：。

它可能与填充规则有关：。

@A.s.Roma当然，我会在问题中发布链接。@A.s.Roma当然，我会在问题中发布链接。你的回答让我想到了这一点，这似乎解释了我所经历的问题。你的回答让我想到了这一点，这似乎解释了我所经历的问题。

function triangles(paper, x, y, w, h, attr) {
    var cx = x + w / 2,
        cy = y + h / 2,
        path = ["M", x, y, "L", x + w, cy, x, y + h, "Z",
                "M", cx, y + h/4, "L", cx,
                y + h*3/4, x, cy, "Z"].join(" ");
    return paper.path(path).attr(attr);
}

var paper = Raphael(document.getElementById("paper"), 200, 200);
triangles(paper, 20, 20, 80, 80, {
    fill: "#abcabd"
});

function triangles(paper, x, y, w, h, attr) {
    var cx = x + w / 2,
        cy = y + h / 2,
        path = ["M", x + w, cy, "L", x, y, x, y + h, "Z",
                "M", cx, y + h/4, "L", cx,
                y + h*3/4, x, cy, "Z"].join(" ");
    return paper.path(path).attr(attr);
}

var paper = Raphael(document.getElementById("paper"), 200, 200);
triangles(paper, 20, 20, 80, 80, {
    fill: "#abcabd"
});

// Fills the inside:
"M", x, y, "L", x + w, cy
// Doesn't fill the inside:
"M", x + w, cy, "L", x, y