object tag with a local SVG inside a HTML SVG tag does not show

Question

Im a bit of a noob when it comes to front end and this SVG seems to be a lot more harder than the rest ! I have added an object in an SVG tag via JS and here is what it looks like;

Object not showing up

no matter what I do, the object is always showing up as 0x0 in the corner what am i missing here? Any help is appreciated!

Here is the JS function:

success: function (fdataf) {
          $trdoc = new DOMParser().parseFromString(fdataf, 'text/html');


          $rooms = $trdoc.getElementsByClassName("Room");
          $main_svg = $trdoc.getElementById("main_svg");

          // $created_image = $trdoc.createElement("svg");
          // $created_image.setAttribute("width", "23");
          // $created_image.setAttribute("height", "23");
          // $created_image.setAttribute("id", "NEWSENSOR");
          //
          // $created_image.setAttribute("viewBox", "85.5 51.0 4630.1 4565.1");
          $objectEl = $trdoc.createElement("object");
          $objectEl.setAttribute("src", "gas_detector.svg");
          $objectEl.setAttribute("type", "image/svg+xml");
          $objectEl.setAttribute("width", "100");
          $objectEl.setAttribute("height", "100");
          $objectEl.setAttribute("Content-type", "image/svg+xml");

          // $created_image.appendChild($objectEl);

          for (let i = 0; i < $rooms.length; i++) {
            $roomName = $rooms[i].getAttribute("id");
            $rx = $rooms[i].getAttribute("x");
            $ry = $rooms[i].getAttribute("y");

            console.log($roomName);
            if ($roomName == 'Room102'){
              // $created_image.setAttribute("x", +($rx) + 5);
              // $created_image.setAttribute("y", +($ry) + 5);

              // $created_image.setAttribute("id", "NEWSENSOR");
              console.log(typeof (+($rx)));
              $main_svg.appendChild($objectEl);
            }

          }
          console.log("AREWE?")
          console.log(new XMLSerializer().serializeToString($trdoc));

          document.getElementById("floorView").innerHTML = new XMLSerializer().serializeToString($trdoc);
          document.getElementById(calling_floor).style.fill = "#0275d8";
        }
      });}

Tried to embed the object in a foreignObject but it dodnt help:

  $created_image = $trdoc.createElement("foreignObject");
  // $created_image.setAttribute("width", "23");
  // $created_image.setAttribute("height", "23");
  // $created_image.setAttribute("id", "NEWSENSOR");
  //
  // $created_image.setAttribute("viewBox", "85.5 51.0 4630.1 4565.1");
  $objectEl = $trdoc.createElement("object");
  $objectEl.setAttribute("src", "gas_detector.svg");
  $objectEl.setAttribute("type", "image/svg+xml");
  $objectEl.setAttribute("width", "100");
  $objectEl.setAttribute("height", "100");
  $objectEl.setAttribute("Content-type", "image/svg+xml");

  $created_image.appendChild($objectEl);

I had tried to change the width and height from % to px to just numbers... none of them worked — Akshay Ram, Apr 06 '23 at 16:05
[Please do not upload images of code/data/errors.](//meta.stackoverflow.com/q/285551) — Heretic Monkey, Apr 06 '23 at 16:10
Hello @James Thank you, i have added the java script function that does this — Akshay Ram, Apr 06 '23 at 16:11
thank you @HereticMonkey, will keep that in mind for next time — Akshay Ram, Apr 06 '23 at 16:12
Im sorry i think i blindly followed this https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files — Akshay Ram, Apr 06 '23 at 16:14
Please try `document.createElementNS("http://www.w3.org/2000/svg", 'foreignObject');` — enxaneta, Apr 06 '23 at 16:59

score 0 · Answer 1 · answered Apr 06 '23 at 17:11

0

I'mnot exactly sure what i did but added these attributes and the object displays both svg and png:

  $created_image = $trdoc.createElement("foreignObject");
  $created_image.setAttribute("width", "26");
  $created_image.setAttribute("height", "26");
  $created_image.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
  $created_image.setAttribute("xmlns:xhtml", "http://www.w3.org/1999/xhtml");
  // $created_image.setAttribute("id", "NEWSENSOR");
  //
  // $created_image.setAttribute("viewBox", "85.5 51.0 4630.1 4565.1");
  $objectEl = $trdoc.createElement("object");
  $objectEl.setAttribute("data", "sensor.png");
  $objectEl.setAttribute("width", "100%");
  $objectEl.setAttribute("height", "100%");

answered Apr 06 '23 at 17:11

Akshay Ram

9
6

Please revise this answer to provide a **comprehensible solution – helpful for other users.** Ideally, your answer should include a working snippet. Currently it is just an array of disconnected code lines. Quite likely, there was something wrong with the creation of elements depending on different namespaces as suggested by @enxaneta. – herrstrietzel Apr 07 '23 at 01:37
hello @herrstrietzel, will do it right away thanks – Akshay Ram Apr 08 '23 at 06:20

object tag with a local SVG inside a HTML SVG tag does not show

1 Answers1