SVG多色折線

Question

我正在使用Leaflet在javascript的地圖頂部繪制SVG格式的地圖數據。 我有成千上萬的坐標，在其中繪制了一個Leaflet Path（擴展了L.Browser.svg）。

我想用第3個變量對行進行顏色編碼（因為這是一張地圖，例如，海拔高度，藍色偏低，紅色偏高等）。 我是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

有一種方法可以實現這一目標，但同時也需要大量工作。 如果您擁有具有正確顏色編碼的完整圖像（類似這樣） ，則可以使用SVG過濾器將圖像與路徑合成：即時路徑着色。 您可能還可以使用SVG蒙版來達到相同的效果。 如果您沒有該圖像，則可以在SVG中構建一個圖像，但這可能需要進行大量的工作。