我正在创建一个在 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>
有人知道为什么会这样吗?
最佳答案
来自 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?
关于javascript - 将元素动态添加到 SVG 后,该项目不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13281158/