Я использую Leaflet для рисования данных карты в формате SVG поверх карты с помощью javascript. У меня есть набор из тысяч координат, в которых я рисую 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, каждый со своим цветом обводки?