CODEWITHSUNDEEP
javascripthtmlsvg
Sackadelic
Sackadelic

Reputation: 1019

Getting [object SVGSVGElement] instead of SVG

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: Screenshot of Dev Tools

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

Upvotes: 1

Views: 3850

Answers (1)

CherryDT
CherryDT

Reputation: 29011

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))

Upvotes: 4

Related Questions