javascript - マルチカラー SVG ポリライン

Question

Leaflet を使用して、JavaScript を使用して地図の上に SVG 形式で地図データを描画しています。リーフレット パス (L.Browser.svg を拡張) を描画している数千の座標のセットがあります。

3 番目の変数を使用して線を色分けしたいと思います (これはマップであるため、たとえば高度、青が低く、赤が高い、またはそのようなものです)。私は SVG を初めて使用しますが、パス全体にストロークの色しか設定できないようです。

たとえば、私が今持っているもの -- 線は 1 つの色にすぎません (単純化のために概念的なコードが削除されています):

// 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 グループに追加するよりも良い方法はありますか?