Question

我是Node JS的新手，我想展示一个SVG地图。我已经尝试将其加载为HTML对象，但它不起作用，即使它确实如此，我想基于某些变量修改地图（更具体地说，基于查询的颜色国家）。

编辑：我尝试通过加载包含以下行的html文件来显示SVG：

var courseCopy = angular.copy(course);
courseCopy.endDate = courseCopy.endDate.getTime();

SVG未在浏览器中显示。

关于SVG的变化，我知道如何更改SVG，而不是如何通过JavaScript / NodeJS（我对他们来说是全新的）。

Answer 1

我从未使用过Node.js，但我已经使用Javascript工作.svg文件。

无论如何，你的代码不能以这种方式显示任何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

希望它有所帮助。

Node JS - 加载和修改SVG文件

1 个答案: