Joh*_*ohn 3 javascript firefox svg standards-compliance innerhtml
我这里运行的是 Firefox 41。
我有一个完整的 svg 文件代码，是从维基媒体的公共资源中随机获取的。（https://upload.wikimedia.org/wikipedia/commons/c/c6/%2212_World_fly.svg）
然后我尝试了以下两个版本将其推入 div 元素，一次使用 div 的innerHTML，一次尝试 div 的appendChild。
innerHTML 至少可以工作，尽管用 webdeveloper 查看生成的 html 看起来有点可疑
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
也出现了。
使用appendChild根本不起作用。
我想使用诸如appendChild之类的东西，因为我知道使用innerHTML的解析器时可能存在陷阱。
那么，如何将 svg 文件的完整字符串获取到 div 中呢？
<html>
<head>
<script type="application/javascript">
function dgebi(id) {
return document.getElementById(id);
}
// short svg file as string
var svgtext = ... //... here I added the string from https://upload.wikimedia.org/wikipedia/commons/c/c6/%2212_World_fly.svg
var d;
function init() {
d = dgebi('id:testdiv');
//useInnerHTMLToCreateSVG();
useDOMParser();
}
function useInnerHTMLToCreateSVG() {
d.innerHTML = svgtext;
}
function useDOMParser() {
// see https://developer.mozilla.org/de/docs/Web/API/DOMParser#Parsing_an_SVG_or_HTML_document
var parser = new DOMParser();
var doc = parser.parseFromString(svgtext, "image/svg+xml");
// returns a SVGDocument, which also is a Document.
d.appendChild(doc);
}
function createElementSVG() {
var se = document.createElement('SVG');
d.appendChild(se);
console.log(se);
}
</script>
</head>
<body onload="init();">
<div style="width:400px;height:400px;border: 1px #ff0000 solid;" id="id:testdiv"></div>
</body>
</html>
您需要附加一个元素而不是文档，即
d.appendChild(document.adoptNode(doc.documentElement));
在实践中，您可以省略领养节点。尽管它是 w3c 强制要求的（并且被 the8472 指出是严格正确的），但仍有太多损坏的站点供浏览器强制使用它。
此外，您无法使用 createElement 创建 SVG 元素（这只会创建 HTML 元素）。您需要使用 createElementNS 即
var se = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
请注意小写名称，因为 SVG 区分大小写。
| 归档时间： |
|
| 查看次数： |
4119 次 |
| 最近记录： |