获取 [object SVGSVGElement] 而不是 SVG

Question

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

<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 元素而不是其源代码放入代码中。

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

---

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

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