多色SVG折线

Question

我使用单张画上用JavaScript地图的顶部SVG格式的地图数据。我有一组数千个坐标，我正在绘制一个Leaflet Path（扩展L.Browser.svg）。

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

E.g.我现在有 - 线只是一种颜色（剥离下来的简单概念代码）：

// 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中构建一个，但它可能会是一个类似的工作量。