Question

我正在创建一个在SVG中绘制的自定义地图。我想在这张地图上添加一个多边形，但是在添加多边形之后，它不会被绘制。如果我将整个页面粘贴到.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?

Answer 2

为什么以上不起作用对我来说仍然是个谜。但是，我确实通过使用以下解决方案来解决问题：

javascript函数加载并添加一个新的svg元素 - 其中包含我们的折线 - 到主元素：

var api  = new XMLHttpRequest;
api.open("GET", a+"/"+b+"/"+c+".svg", false);

api.send("");

if( api.status == 200 ) {
    var parser = new DOMParser();
    var data = parser.parseFromString(api.responseText, "text/xml");
    data = data.firstChild;
    console.log(data);
    data.setAttribute("x", d);
    data.setAttribute("y", e);
    document.getElementById('front').appendChild(data);
}

现在我没有在.svg文件中使用折线元素，而是将完整的svg元素放在文件中：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
    <polyline fill="#FFFFFF" points="0,97 45,81.333 51.667,100.667 13.667,117.333 31,164 142.167,119.5 127.167,75.001 
172.667,53.341 152.5,0 0,0 "/>
</svg>

这确实有效。通过设置I的X和Y值，可以将svg定位在正确的位置，以便在正确的位置绘制折线。

结果：

<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
    <g id="back">
        <image xlink:href="18/135160/86183.png" x="0" y="0" width="256" height="256"></image>
        <image xlink:href="18/135161/86183.png" x="256" y="0" width="256" height="256"></image>
        <image xlink:href="18/135160/86184.png" x="0" y="256" width="256" height="256"></image>
        <image xlink:href="18/135161/86184.png" x="256" y="256" width="256" height="256"></image>
    </g>
<g id="front">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
            <polyline name="St. Jansdal" fill="#FFFFFF" points="256,84.75 209,100.75 230.75,157.5 142.5,194.25 160.75,248.5 221.75,223.75 256,241 "></polyline>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="256" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
            <polyline name="St. Jansdal" fill="#FFFFFF" points="0,85.336 6.333,82.669 44,180.336 86,200.669 135.333,181.002 155.667,138.669 136.667,82.669   190,63.669 202,94.336 256,76.002 256,137.336 219.333,151.336 184.333,219.669 188.333,228.669 231.333,252.669 256,243.336   256,256 30,256 0,240.669 "></polyline>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="256" y="256" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
            <polyline name="St. Jansdal" fill="#FFFFFF" points="31.25,0 78.5,24 82.75,29.75 82.75,34.75 81.5,40 74.5,52.5 0,80.75 0,134.25 64.25,110 87.25,120   120.75,207.5 133.5,212.25 133.5,206 139.25,199.75 150,197.75 154,198.75 162,202.25 165.25,191.5 122.5,76.25 129.5,61.75   135.25,55 138.75,53.25 141.5,53.25 144.5,53.75 235.25,93.75 239.5,103.75 256,97.75 256,0 "></polyline>
        </svg>
    </g>
</svg>

在向SVG动态添加元素后，该项目不可见

2 个答案: