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

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

---

有人知道为什么会这样吗

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

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文件中只包含polyline元素，而是在文件中添加了完整的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>

这确实有效。通过设置svg的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>

---

我仍然不明白为什么上述方法行不通。但是，我确实通过使用以下解决方案解决了问题：

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文件中只包含polyline元素，而是在文件中添加了完整的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>

这确实有效。通过设置svg的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>

来自Mozilla文档：

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

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

通过从createElement切换到CreateElements，我解决了一个类似的问题。请参阅Mozilla文档中的答案：

：

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

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

---

通过从createElement切换到CreateElements，我解决了一个类似的问题。请参阅答案：

您能否发布一个更完整的示例来说明这一点？它在哪个浏览器中出现故障？另外，请注意元素没有x、y、width和height属性，它们现在被忽略，但以后可能会添加到svg语言中，这可能会破坏您的内容。自定义属性应命名为data-*或使用自定义xml名称空间前缀。@ErikDahlström我已经在Chrome和FireFox中测试了结果。两者的结果相同。对于完整的代码，请检查parseFromString的第二个参数“image/svg+xml”是否有帮助？加载只表明您尝试使用DOMParser解析的字符串实际上不是svg（例如，尝试加载此：）@ErikDahlström很抱歉，我忘了增加版本号，所以它是另一个版本-一个确实有效的版本。你能发布一个更完整的例子来说明这一点吗？它在哪个浏览器中出现故障？另外，请注意元素没有x、y、width和height属性，它们现在被忽略，但以后可能会添加到svg语言中，这可能会破坏您的内容。自定义属性应命名为data-*或使用自定义xml名称空间前缀。@ErikDahlström我已经在Chrome和FireFox中测试了结果。两者的结果相同。对于完整的代码，请检查parseFromString的第二个参数“image/svg+xml”是否有帮助？加载只表明您尝试使用DOMParser解析的字符串实际上不是svg（例如，尝试加载此：）@ErikDahlström很抱歉，我忘了增加版本号，所以它是另一个版本-一个可以工作的版本。您可以选择只平移（和/或缩放）多段线，例如使用变换属性，以适应最顶端的坐标系。您可以选择只平移（和/或缩放）多段线，例如，使用变换属性，以适合最顶层的坐标系。