【发布时间】：2013-07-13 05:31:51
【问题描述】：
我正在创建一个在 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>
有人知道为什么会这样吗？
【问题讨论】：
-
您能否发布一个更完整的示例来说明这一点？它在哪些浏览器中失败？另外，请注意
元素没有 x、y、width、height 属性，它们现在被忽略，但以后可能会被添加到 svg 语言中——这可能会破坏你的内容。自定义属性应命名为 data-* 或使用自定义 xml 命名空间前缀。 -
@ErikDahlström 我已经在 Chrome 和 FireFox 中测试了结果。两者都给出相同的结果。完整代码检查peterelzinga.eu/map/tilesV3.html
-
如果你将第二个参数设置为 parseFromString "image/svg+xml" 有帮助吗？
-
Loading peterelzinga.eu/map/tilesV3.html 只是表明您尝试使用 DOMParser 解析的字符串并不是真正的 svg（例如，尝试加载：peterelzinga.eu/map/12/2110/1345.svg）。
-
@ErikDahlström 很抱歉忘记增加版本号，所以它是另一个版本 - 顺便说一句，一个可以工作的版本
标签： javascript html svg