Узел JS - загрузка и изменение SVG-файла

Question

Я совершенно новичок в Node JS, и я хочу показать SVG-карту. Я попытался загрузить его как объект HTML, но он не работает, и даже если это так, я хочу изменить карту на основе определенных переменных (в частности, стран цвета на основе запроса).

Изменить: Я пытался показывая SVG, загрузив файл HTML, содержащий следующую строку:

<object type="image/svg+xml" data="image.svg">Nope.</object> 

SVG не показывает в браузере.

И что касается изменений в SVG, я знаю, как изменить SVG, а не как это сделать с помощью JavaScript/NodeJS (я совершенно им не знаком).

Answer 1

Я никогда не использовал Node.js, но я уже работал над файлами .svg с Javascript.

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

...//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 

Например.

Теперь вы хотите отредактировать стиль объекта svg (здесь ваша страна) на мероприятии. Просто добавьте слушателя событий на свой объект и отредактируйте его.

element.addEventListener("click",function(){ 
    //Do your change stuff here 
    //elementCountry is the svg "path" corresponding to a country 
    elementCountry.setAttribute("fill","#FF0000"); 
}); 

это наполнит заинтересованную "страну" в красном

Вы должны проверить это: http://www.w3schools.com/jsref/met_document_addeventlistener.asp

и это: http://www.w3schools.com/jsref/met_element_setattribute.asp

Надеется, что это помогает.