1

我正在创建一个在 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>

有谁知道为什么会这样？

4

2 回答 2

4

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

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

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

我通过从 createElement 切换到 createElementNS 解决了类似的问题。查看答案：jquery 的附加不能与 svg 元素一起使用？

于 2013-07-12T21:31:51.487 回答
1

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

用于加载和添加一个新的 svg 元素（包含我们的折线）到主元素的 javascript 函数：

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>
于 2012-11-08T18:01:27.537 回答