javascript - 将元素动态添加到 SVG 后，该项目不可见

Question

我正在创建一个在 SVG 中绘制的自定义 map 。我想在这张 map 上添加一个多边形，但是在添加多边形后它没有被绘制。如果我将完整的页面粘贴到一个 .html 文件中并打开它，它会显示 (http://peterelzinga.eu/map/test.html)。

将多边形添加到我的 SVG 的代码:

var svg = file_get_contents("18/135160/86183.svg");
var parser = new DOMParser();
var data = parser.parseFromString(svg, "text/xml");
data = data.firstChild;
console.log(data);
data.setAttribute ("x", d);
data.setAttribute ("y", e);
document.getElementById('front').appendChild(data);

添加多边形后的SVG元素:

<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
    <g id="back">
        <image xlink:href="12/2110/1345.png" x="0" y="0" width="256" height="256"></image>
    </g>
    <g id="front">
        <g width="256" height="256" x="0" y="0">
            <polyline fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="256,85.333 209,100.667 230.334,158.334 143,194.334 160.667,248.667 221.667,223.667 256,241.334 " onclick="alert('St Jansdal')"></polyline>
        </g>
    </g>
</svg>

有人知道为什么会这样吗？

Answer 1

来自 Mozilla 文档:https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

您应该将内容类型指定为“image/svg+xml”以获取 SVGDocument。

问题是您生成的节点不是 SVG 节点，而是 XML 节点。

我通过从 createElement 切换到 createElementNS 解决了类似的问题。查看答案:jquery's append not working with svg element?