使SVG linearGradient遵循路径

Question

我有一张通过美国从缅因州到圣地亚哥的迂回路线地图（使用每个县的旅行推销员算法生成），我想将它从红色变为蓝色，表明沿着路径走了多远，像这样：

以上是通过绘制3,000个片段生成的，一个用于县之间的每个路径，并使用简单的色标来确定颜色，使用9点ColorBrewer光谱刻度：

var colors = ["#D53E4F", "#F46D43", "#FDAE61", "#FEE08B", "#FFFFBF", "#E6F598", "#ABDDA4", "#66C2A5", "#3288BD"];
var markers = d3.range(0, route.length, Math.floor(route.length / (colors.length - 1)));
var color_scale = d3.scaleLinear().range(colors).domain(markers);

但是，在路线的每个站点上建立一条长路径会更加高效。但是当我用{9}停止为这条线着色时，它看起来不正确：

linearGradient

很明显，渐变只是以var defs = svg.append("defs"); var gradient = defs.append("linearGradient") .attr("id", "svgGradient") .attr("x1", "0%") .attr("x2", "100%") .attr("y1", "0%") .attr("y2", "100%"); var interval = 12.5; colors.reverse().forEach((d, i) => { gradient.append("stop") .attr('class', 'start') .attr("offset", i * interval + "%") .attr("stop-color", d) .attr("stop-opacity", 1); }); 的方式应用于路径，左上角的第一种颜色直到右下角的最后一种颜色。我需要根据路径上的点计算颜色，而不是地图上的位置。

不知何故，this example似乎做了我需要的东西，但它可能只是样本的本质，使它看起来像这样。我发现this gist建议定期对路径进行采样，但我相信这会让我回到我开始的地方。

最初的解决方案并不糟糕，但与单一路径相比，处理器的处理能力非常高，特别是在手机上。

渐变是否可以遵循从开始到结束的路径，以便rect引用路径上的进度？

Answer 1

有一种方法可以使用可变笔划虚线阵列和过滤器来破坏沿着路径的渐变，但它只适用于相对较短的段（并且可以说即使是那些也不实用。）对于一条路径很长一段时间，你需要使用单独的路段和＆amp;分别给它们上色。