多色 SVG 折线

Question

我正在使用 Leaflet 在带有 javascript 的地图上绘制 SVG 格式的地图数据。我有一组数千个坐标，我正在其中绘制一个传单路径（扩展 L.Browser.svg）。

我想用第三个变量对线进行颜色编码（因为这是一张地图，比如说海拔，蓝色低，红色高，或类似的东西）。我是 SVG 新手，但似乎我只能为整个路径设置笔触颜色。

例如我现在所拥有的——线条只是一种颜色（为简单起见，概念代码被剥离）：

// create the SVG group and path element
this._container = this._createElement('g');
this._path = this._createElement('path');
// set the stoke color -- I wish I could make this dynamic per segment!
this._path.setAttribute('stroke', '#00000');

// Not real code, but simplified...generate lots of coordinates for the polyline
var myPath = "M" + p.x + "," + p.y + " L";
points.each(function(item, index){
    poly += item.x + "," + item.y + " ";                    
});

// update
this._path .setAttribute('d', poly);

有没有比创建数千个路径元素并将它们添加到 SVG 组中更好的方法来做到这一点，每个元素都有自己的描边颜色？

Answer 1

有一种方法可以实现这一点，但也需要大量工作。如果您有一个具有正确颜色编码(something like this) 的完整图像，您可以使用 SVG 过滤器将该图像与您的路径合成：即时路径着色。您也可以使用 SVG 蒙版来实现相同的效果。如果您没有该图像，那么您可以在 SVG 中构建一个，但这可能需要做类似的工作量。