javascript - 使用 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>