title: Having trouble adding an image to an svg -> tspan tag
body: <p>I've tried to follow the tips other users got on this, but it seems that I'm not getting this right or this cannot be done at all. I'm trying to add an image to a SVG texte tag by using the tspan tag. Appreciate any suggestions.</p>
  
  <p>Here is the snippet :  <a href="https://jsfiddle.net/mLkts2p5/" rel="nofollow noreferrer">https://jsfiddle.net/mLkts2p5/</a></p>
  
  <pre><code>*{
    box-sizing:border-box;
  }
  
  html,
  body {
  
    height: 100vh;
    width: 100vw;
    padding: 0%;
    margin: 0%;
    background-color: rgba(16, 14, 23, 1);
  }
  
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets."&gt;
      &lt;link rel="stylesheet" href="test.css"&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" height="4vh" viewBox="0 0 100% 3vh" class="headerrow"&gt;
    &lt;text class="textrowdata1" x="1%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold"&gt;Name&lt;tspan id="pin"&gt;&lt;/tspan&gt;&lt;/text&gt;
    &lt;text class="textrowdata1" x="16%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold"&gt;1111&lt;/text&gt;
    &lt;text class="textrowdata1" x="21%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold"&gt;2222&lt;/text&gt;
    &lt;text class="textrowdata1" x="28%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold"&gt;3333&lt;/text&gt;
    &lt;text class="textrowdata1" x="34%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold"&gt;4444&lt;/text&gt;
  &lt;/svg&gt;
  
  &lt;script&gt;
  
  let elem = document.createElement("img");
  elem.src = "https://media.istockphoto.com/vectors/elephant-head-vector-id1175041493";
  elem.setAttribute("height", "200px");
  elem.setAttribute("width", "200px");
  document.getElementById("pin").appendChild(elem);
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  </code></pre>