Svg RaphaelJS为路径的顶端着色

有人知道是否有可能将路径的最后10个像素更改为不同的颜色吗？我试着用渐变来做，但是没有用。我似乎也找不到任何其他方法来做这件事。任何帮助都将不胜感激。

您应该能够使用Raphael的

元素.getSubpath（）

界面来完成此操作

子路径允许您获取特定点之间的“路径的路径”。所以，如果你已经有了一条路径，比如

var mainPath = paper.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90");

您可以获得一个子路径，该子路径为您提供具有任意起点和终点的该路径的“切片”：

var subpathString = mainpath.getSubpath(20, 50);

然后，您可以使用该路径创建一个新元素，例如，使用不同的笔划宽度：

var subpath = paper.path(subpathString);
subpath.attr({'stroke-width' : 4});

这将类似于JSFIDLE：

例如，要使路径的最后10个像素变为红色，您只需要知道路径的长度。使用

element.getTotalLength（）

，这很容易：

var pathLength = mainPath.getTotalLength();
var subpathStart = pathLength - 10;
var subpathString = mainPath.getSubpath(subpathStart, pathLength);
var highlightedPathSegment = paper.path(subpathString);
highlightedPathSegment.attr({'stroke-width' : 2, stroke : '#FF0000'});

---

你应该在上面画另一条10像素长的路径。我想了想，但不知道怎么画好，因为我在不同的方向有很多不同的路径，等等。我想我可以试着把BBox从路径上拉出来，然后用那里的坐标画另一条只有10像素长的线。哦，伙计，太好了！！非常感谢你。我甚至没有意识到功能的存在。