node.js - Node JS - 加载和修改 SVG 文件

Question

我是 Node JS 的新手，我想显示 SVG map 。我试过将它作为 HTML 对象加载，但它不起作用，即使它起作用了，我想根据某些变量修改 map (更具体地说，根据查询为国家/地区着色)。

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

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

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

希望对您有所帮助。