Javascript 如何填充已经跨越的svg路径？

我有一个物体，它必须沿着一条路径移动（我找到了一个解决方案），但我也必须用另一种颜色“填充”，这条路径是交叉的

是我迄今为止管理的一个例子。 代码如下所示：

var searchDl = 1;
var l = 0;

// Creates canvas 320 × 200 at 10, 50
var r = Raphael(10, 50, 520, 500);

var p = r.path("M150 10 L75 200 L225 200 L325 100").attr({stroke: "#ddf","stroke-width":5}),
    pt = p.getPointAtLength(l);
    e = r.ellipse(pt.x, pt.y, 7, 7).attr({stroke: "none", fill: "#f00"}),
    totLen = p.getTotalLength(),


start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    var tmpPt = {
        x : this.ox + dx, 
        y : this.oy + dy
    };
    // move will be called with dx and dy
    l = gradSearch(l, tmpPt);
    pt = p.getPointAtLength(l);
    this.attr({cx: pt.x, cy: pt.y});
},
up = function () {
    // restoring state
    this.attr({opacity: 1});
},
gradSearch = function (l0, pt) {
    l0 = l0 + totLen;
    var l1 = l0,
        dist0 = dist(p.getPointAtLength(l0 % totLen), pt),
        dist1,
        searchDir;

    if (dist(p.getPointAtLength((l0 - searchDl) % totLen), pt) > 
       dist(p.getPointAtLength((l0 + searchDl) % totLen), pt)) {
        searchDir = searchDl;
    } else {
        searchDir = -searchDl;
    }

    l1 += searchDir;
    dist1 = dist(p.getPointAtLength(l1 % totLen), pt);
    while (dist1 < dist0) {
        dist0 = dist1;
        l1 += searchDir;
        dist1 = dist(p.getPointAtLength(l1 % totLen), pt);
    }
    l1 -= searchDir;

    return (l1 % totLen);
},
dist = function (pt1, pt2) {
    var dx = pt1.x - pt2.x;
    var dy = pt1.y - pt2.y;
    return Math.sqrt(dx * dx + dy * dy);
};
e.drag(move, start, up);

var searchDl=1；
var l=0；
//在10,50处创建画布320×200
var r=拉斐尔（10,50520500）；
var p=r.path（“M150 10 L75 200 L225 200 L325 100”）.attr（{stroke:#ddf”，“stroke width”：5}），
pt=p.getPointAtLength（l）；
e=r.椭圆（pt.x，pt.y，7，7）.attr（{笔划：“无”，填充：#f00}），
totLen=p.getTotalLength（），
开始=功能（）{
//存储原始坐标
this.ox=this.attr（“cx”）；
this.oy=this.attr（“cy”）；
this.attr（{opacity:1}）；
},
移动=功能（dx，dy）{
var tmpPt={
x:this.ox+dx，
y:这个
};
//将使用dx和dy调用move
l=梯度搜索（l，tmpPt）；
pt=p.getPointAtLength（l）；
this.attr（{cx:pt.x，cy:pt.y}）；
},
up=函数（）{
//恢复状态
this.attr（{opacity:1}）；
},
梯度搜索=函数（l0，pt）{
l0=l0+totLen；
变量l1=l0，
dist0=dist（p.getPointAtLength（10%总长度），pt），
区1，
searchDir；
如果（距离（p.getPointAtLength（（l0-searchDl）%totLen），pt）>
距离（p.getPointAtLength（（l0+searchDl）%totLen），pt））{
searchDir=searchDl；
}否则{
searchDir=-searchDl；
}
l1+=searchDir；
dist1=dist（p.getPointAtLength（l1%总长度），pt）；
而（dist1

---

我该怎么开始？我应该调查什么？

您是否有效地尝试创建从开始到当前位置的“轨迹”

如果是这样，您可能需要element.getSubpath（start，length）；删除并添加每个移动路径。您不能将现有路径填满一半，因为您需要将其拆分，但这样您就不能再移动它了。因此，将临时高亮显示路径放在现有路径上就可以了

附加代码如下所示

if( highlightPath ) { highlightPath.remove(); }    
pathString = p.getSubpath(0,l);

highlightPath = r.path( pathString )
                 .attr({ stroke: 'blue',  "stroke-width":5});