多色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中構建一個，但它可能會是一個類似的工作量。