使用 JavaScript 将 SVG 文档动态插入 HTML 中？

Question

如何将 SVG 动态插入 HTML？

现在的问题是SVG是一个文档，我只能找到如何插入节点。 我尝试了一些不同的方法将 SVG 转换为节点，但没有找到任何有效的方法。

 const svgDoc = new DOMParser().parseFromString(svgText, "text/html"); window.document.querySelector("#container").appendChild(svgDoc); const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet"> <title>My First Scalable Vector Graphic</title> <desc>An experimental SVG from SitePoint.com</desc> <g id="main"> <line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" /> <polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" /> <polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" /> <rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" /> <circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" /> <ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" /> <text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text> </g> </svg> `;

 <div id="container"></div>

Answer 1

使用document.documentElement获取文档的根元素。

 const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet"> <title>My First Scalable Vector Graphic</title> <desc>An experimental SVG from SitePoint.com</desc> <g id="main"> <line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" /> <polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" /> <polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" /> <rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" /> <circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" /> <ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" /> <text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text> </g> </svg> `; const svgDoc = new DOMParser().parseFromString(svgText, "image/svg+xml"); window.document.querySelector("#container").appendChild(svgDoc.documentElement);

 <div id="container"></div>