node.js - Node JS - load and modify SVG file -
i'm new node js , want show svg map. i've tried loading html object, doesn't work , if did, want modify map based on variables (more color countries based on query).
edit: tried showing svg loading html file containing following line:
<object type="image/svg+xml" data="image.svg">nope.</object>
the svg did not show in browser.
and regarding changes in svg, know how change svg, not how through javascript/nodejs (i new them).
i never used node.js, worked on .svg files javascript.
anyway, code cannot display svg way, should display html object on page, :
...//html code <div id="svgcontainer"> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <path class="country" id="spain" d="..." fill="none"></path> <path class="country" id="italy" d="..." fill="none"></path> <path class="country" id="england" d="..." fill="none"></path> <path class="country" id="netherlands" d="..." fill="none"></path> </g> </svg> </div> ...//html code
for example.
now, wish edit style of svg object (here country) on event. add event listener on concerned object, , edit style.
element.addeventlistener("click",function(){ //do change stuff here //elementcountry svg "path" corresponding country elementcountry.setattribute("fill","#ff0000"); });
this fill concerned "country" in red
you should check : http://www.w3schools.com/jsref/met_document_addeventlistener.asp
and : http://www.w3schools.com/jsref/met_element_setattribute.asp
hope helps.
Comments
Post a Comment