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

Използвам Leaflet, за да начертая картографски данни във формат SVG върху карта с javascript. Имам набор от хиляди координати, в които рисувам път на листовка (разширява 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