我怎样才能填满已经跨越的 svg 路径？答案

【问题标题】：How could I fill up the svg path that was already crossed?我怎样才能填满已经跨越的 svg 路径？
【发布时间】：2014-07-20 05:03:33
【问题描述】：

我有一个必须沿着路径移动的对象（我找到了解决方案的行为），但我还必须用另一种颜色“填充”经过的路径。

Here 是我目前管理的一个例子。代码也如下所示：

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);

我应该如何开始？我应该调查什么？

【问题讨论】：

标签： javascript jquery css svg raphael

【解决方案1】：

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

如果是这样，您可能需要 element.getSubpath(start, length);删除并添加每个移动路径。您不能真正将现有路径填满一半，因为您需要拆分它，但是您不能再在它上面移动。因此，应该在现有路径上放置一个临时突出显示路径。

附加代码如下...

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

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

jsfiddle

【讨论】：