IMG tag in svg is not working when only id and class is provided-CodePudding

The HTML code below shows the HTML code where I am using SVG to display pictures and then polygons on the pictures and this is done with D3 using image pagination.

Somehow the images are displayed if I am using an main tag outside of the SVG with the same id and class but as soon as I keep it inside SVG itS displays the SVG BOX but not the image inside the SVG

the reason why i have a main tag can be understood if showImages() function is referred from the javascript code

The javascript code shows how the id and classes are being used in the HTML code. Also, I want the image to be displayed with its original size and scale so what input should I provide to the SVG tag and img tag in terms of height and width to prevent it from changing the size of the image.

I really need to get this done, this is the last time of my task. Please help me!

        <div >
<main id="image-gallery" >  </main> 
<svg width="500" height="500">
  <polygon  id='x' style="stroke:#f00; fill:none;" /> 
</svg>

     </div>

...

CodePudding user response：

Either the image can be displayed using the <img> element outside the SVG or using the <image> element inside the SVG. Here is an example of both where image and SVG are positioned absolute in the container.

.gallery {
  display: flex;
  gap: 10px;
}

.galleryimage {
  position: relative;
  width: 250px;
  height: 150px;
}

.galleryimage img {
  position: absolute;
}

.galleryimage svg {
  position: absolute;
}

<div >
  <div >
    <img src="https://via.placeholder.com/250x150.png" id="image-gallery"  width="250" height="150"/>
    <svg width="250" height="150">
      <polygon id="x" points="30,30 200,40 100,120 50,110" style="stroke:#f00; fill:none;" /> 
    </svg>
  </div>

  <div >
    <img src="https://via.placeholder.com/250x150.png" id="image-gallery"  width="250" height="150"/>
    <svg width="250" height="150">
      <image href="https://via.placeholder.com/250x150.png" width="250" height="150"/>
      <polygon id="x" points="30,30 200,40 100,120 50,110" style="stroke:#f00; fill:none;" />
    </svg>
  </div>
</div>