javascript - Multi-color SVG polyline -



javascript - Multi-color SVG polyline -

i'm using leaflet draw map info in svg format on top of map javascript. have set of thousands of coordinates, in i'm drawing leaflet path (extends l.browser.svg).

i'd color code line 3rd variable (since map, say, altitude, bluish beingness low , reddish beingness high, or that). i'm new svg, seems can set stroke-color entire path.

e.g. have -- line 1 color (conceptual code stripped downwards simplicity):

// create svg grouping , path element this._container = this._createelement('g'); this._path = this._createelement('path'); // set stoke color -- wish create dynamic per segment! this._path.setattribute('stroke', '#00000'); // not real code, simplified...generate lots of coordinates 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);

is there improve way create thousands of path elements , add together them svg group, each it's own stroke color?

there way accomplish lot of work. if have finish image proper color coding (something this), can utilize svg filter composite image path: instant path coloring. can utilize svg mask accomplish same effect. if don't have image, can build 1 in svg, it's going similar amount of work.

javascript svg vector-graphics leaflet geojson

Comments

Popular posts from this blog

javascript - mongodb won't find my schema method in nested container -

Hibernate criteria by a list of natural ids -

ios - Lagging ScrollView with UIWebview inside -