使SVG linearGradient遵循路径

Posted 2021-05-02

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

以上是通过绘制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);        
});

非常明显的是，渐变仅以与rect相同的方式应用于路径，左上角的第一种颜色直到右下角的最后一种颜色。我需要根据路径上的点计算颜色，而不是地图上的位置。

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

最初的解决方案并不可怕，但与单一路径相比，它在处理器上非常重，特别是在手机上。

渐变可以从开始到结束遵循一条路径，这样stop指的是沿着路径的进展吗？

答案

有一种方法可以使用可变笔划虚线阵列和过滤器来破坏沿着路径的渐变，但它只适用于相对较短的段（并且可以说对于那些甚至那些都不实用。）对于这么长的路径，你需要使用单独的路径段并分别着色。