获取 [object SVGSVGElement] 而不是 SVG

Question

I have a "group" of SVGs at the bottom of my HTML page, hidden. I am trying to conditionally use them based on object keys. For instance, I have:

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

And I want to conditionally call #fiftyOne as the svg logo inside of this Javascript Template:

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>
        `;
    });

But I'm getting the rendered card, with [object SVGSVGElement] instead of the rendered SVG. Am I doing something wrong?

---

UPDATE:

Using p.svg.outerHTML works to fill the HTML with the proper information. The next problem I'm facing is the SVG won't show up on the actual card, even though the data is there. See screenshots:

Any Ideas? This is the first time working with SVGs.

Answer 1

You are putting a live SVG element into the code instead of its source.

You can output p.svg.outerHTML instead of just p.svg .

---

Or if you wanted to include that actual element and not a copy of it, you'd have to insert the element after you rendered the HTML entirely (not after each iteration because element references get invalidated every time you set innerHTML as all the contents are reconstructed):

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