获取 [object SVGSVGElement] 而不是 SVG

Question

我的 HTML 页面底部有一组 SVG，隐藏。 我正在尝试根据 object 键有条件地使用它们。 例如，我有：

<svg id="fiftyOne" width="100%" height="100%" viewBox="0 0 2863 871" ...../></svg>

我想有条件地将#fiftyOne称为此 Javascript 模板内的 svg 徽标：

const refreshView = (dataSet) => {
    output.innerHTML = "";
    dataSet.forEach((p) => {
      output.innerHTML += `
        
        <div class="card pickup-result" data-output="${p.output}" data-tone="${p.tone}">
        <div class="card-body">
          <div class="card-heading">
            <h4>${p.name}</h4>${p.svg}   <// Call the SVG here.
          </div>
          <hr>
         
          <h5>Specs:</h5>
          <p><strong>Output: </strong> ${p.output}</p>
          <p><strong>Description:</strong> ${p.description}</p>
  
          <div class="pickup-info">
          <a class="link-button" target="blank" href="${p.url}">See Product</a>
           
          </div>
        </div>
        
        </div>
        `;
    });

但是我得到了渲染的卡片，使用[object SVGSVGElement]而不是渲染的 SVG。 难道我做错了什么？

---

更新：

使用p.svg.outerHTML可以用正确的信息填充 HTML。 我面临的下一个问题是 SVG 不会出现在实际卡上，即使数据在那里。 见截图：

有任何想法吗？ 这是第一次使用 SVG。

Answer 1

您将实时 SVG 元素放入代码而不是其源代码中。

您可以 output p.svg.outerHTML而不仅仅是p.svg 。

---

或者，如果您想包含该实际元素而不是它的副本，则必须在完全渲染 HTML 之后插入该元素（不是在每次迭代之后，因为每次设置 innerHTML 时元素引用都会失效，因为所有内容都是重建）：

const headers = Array.from(output.querySelectorAll('.card-heading'))
dataSet.forEach((p, index) => headers[index].appendChild(p.svg))