Having trouble adding an image to an svg -> tspan tag

Question

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.

Here is the snippet: https://jsfiddle.net/mLkts2p5/

*{
  box-sizing:border-box;
}

html,
body {

  height: 100vh;
  width: 100vw;
  padding: 0%;
  margin: 0%;
  background-color: rgba(16, 14, 23, 1);
}

<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
    <link rel="stylesheet" href="test.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  </head>
  <body>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="4vh" viewBox="0 0 100% 3vh" class="headerrow">
  <text class="textrowdata1" x="1%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">Name<tspan id="pin"></tspan></text>
  <text class="textrowdata1" x="16%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">1111</text>
  <text class="textrowdata1" x="21%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">2222</text>
  <text class="textrowdata1" x="28%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">3333</text>
  <text class="textrowdata1" x="34%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">4444</text>
</svg>

<script>

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

</script>

</body>

</html>

Answer 1

Using document.createElementNS() , it worked but not inside the <text> .

Created a <g id="pin"></g> outside the text and appended image to it. check the snippet.

 var img = document.createElementNS('http://www.w3.org/2000/svg', 'image'); img.setAttributeNS(null, 'height', '20'); img.setAttributeNS(null, 'width', '20'); img.setAttributeNS(null, 'id', 'theID'); img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://media.istockphoto.com/vectors/elephant-head-vector-id1175041493'); img.setAttributeNS(null, 'x', '0'); img.setAttributeNS(null, 'y', '0'); document.getElementById("pin").append(img);

 * { box-sizing: border-box; } html, body { height: 100vh; width: 100vw; padding: 0%; margin: 0%; background-color: rgba(16, 14, 23, 1); }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets:"> <script src="https.//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min:js"></script> </head> <body> <svg xmlns="http.//www.w3,org/2000/svg" width="100%" height="4vh" class="headerrow"> <text class="textrowdata1" x="1%" y="70%" fill="rgb(117,163.126)" font-size="1,1vw" font-weight="bold">Name</text><g id="pin"></g> <text class="textrowdata1" x="16%" y="70%" fill="rgb(117,163.126)" font-size="1,1vw" font-weight="bold">1111</text> <text class="textrowdata1" x="21%" y="70%" fill="rgb(117,163.126)" font-size="1,1vw" font-weight="bold">2222</text> <text class="textrowdata1" x="28%" y="70%" fill="rgb(117,163.126)" font-size="1,1vw" font-weight="bold">3333</text> <text class="textrowdata1" x="34%" y="70%" fill="rgb(117,163.126)" font-size="1.1vw" font-weight="bold">4444</text> </svg> </body> </html>

Having trouble adding an image to an svg -> tspan tag

Question

1 answers

solution1
1 ACCPTED 2020-02-12 12:16:48

Having trouble adding an image to an svg -> tspan tag

Question

1 answers

solution1 1 ACCPTED 2020-02-12 12:16:48

solution1
1 ACCPTED 2020-02-12 12:16:48