Javascript: Insert image into svg element in html file

Question

I have a svg element in a html document that I would like to file with an image upon certain interactions, however no matter how hard I tried I can't get this to work. Even the most simple example here

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <div id = "header" style = "border:1px solid black;">
      <svg width="100%" height="100%" id = "map"></svg>
    </div>
    <script>
    var el = document.createElementNS('http://www.w3.org/2000/svg', 'image');
    el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "https://url_of_image_here.com");
    el.setAttributeNS(null, 'width', '100');
    el.setAttributeNS(null, 'height', '100');
    el.setAttributeNS(null, 'x', 20);
    el.setAttributeNS(null, 'y', 20);
    document.getElementById("map").append(el);
    </script>
  </body>
</html>

Produces only an empty <div>... I looked at all other related posts and always end up with an empty <div> (in fact, this snipet is taken from another answer to this issue...). What do I do wrong? Moreover, how do I link a local image?

Your example snippet shows an image for me once I replace "https://url_of_image_here.com" with the URL of an image. Are there any errors in the developer console (F12)? — Wander Nauta, Sep 29 '22 at 13:09
No errors, and no warnings. Just an empty div, no matter which url I try. — Johncowk, Sep 29 '22 at 13:15

score 0 · Answer 1 · answered Sep 29 '22 at 14:27

0

Not sure why, but making the image explicitely 'visible' via el.setAttributeNS(null, 'visibility', 'visible'); seemed to have solved my issue...

answered Sep 29 '22 at 14:27

Johncowk

342
1
16

Javascript: Insert image into svg element in html file

1 Answers1