Многоцветная полилиния SVG

Я использую 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, каждый со своим цветом обводки?


person user690750    schedule 06.02.2013    source источник


Ответы (1)


Есть способ добиться этого, но это также много работы. Если у вас есть полное изображение с правильной цветовой кодировкой (что-то вроде этого), вы можете использовать фильтр SVG, чтобы скомпоновать это изображение с вашим путем: мгновенное окрашивание пути. Вероятно, вы также можете использовать маску SVG для достижения того же эффекта. Если у вас нет этого изображения, вы можете создать его в SVG, но это, вероятно, потребует такого же объема работы.

person Michael Mullany    schedule 06.02.2013
comment
У меня нет изображения. У меня есть массив точек X, Y и цветов. Это помогает прояснить? - person user690750; 07.02.2013
comment
Я думаю, вам просто лучше установить цвет обводки для каждого сегмента пути. - person Michael Mullany; 07.02.2013
comment
Есть ли лучший способ сделать это, кроме создания массива элементов пути (createElement('path'))? Могу ли я получить доступ к подэлементам группы или пути? В поиске ничего не нашел. - person user690750; 08.02.2013
comment
Насколько мне известно, нет. Я считаю, что можно стилизовать только объект пути в целом. - person Michael Mullany; 08.02.2013