使SVG linearGradient遵循路径

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使SVG linearGradient遵循路径相关的知识,希望对你有一定的参考价值。

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

enter image description here

以上是通过绘制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为这条线上色时,它看起来不正确:

enter image description here

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指的是沿着路径的进展吗?

答案

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

以上是关于使SVG linearGradient遵循路径的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 linearGradient defs 获取 SVG 元素的 xpath?

使用 `fill="url(#a)"` 时如何使用 Tailwind CSS 设置 SVG <linearGradient> 样式?

在 svg 路径更改后再次执行动画

使用 SVG 剪辑路径

如何使 CAGradientLayer 遵循 CGPath

使用 CSS 或 AngularJS 的 SVG 路径元素悬停缩放