How to get the same result of an svg inside <img> tag using <object> or pure <svg>?

I'm trying to apply an svg above an image and keep his aspect-ratio with object-fit. Both the svg and the image have the same size (100vw & 100vh), and they are positioned using position relative/absolute. I want to make this SVG interactive, but can only make this using tags like <svg>, <object> or <iframe>, because they allow me to access the elements in the JS.

When I apply the <img> with the configuration on CSS, works fine:

<body>
    <main class="full-viewport relative">
      <div class="full-viewport object-cover relative">
        <img class="full-viewport object-cover absolute" src="https://i.postimg.cc/j2CWcLQN/cafe-night.png" />

        <!-- works good - ideal positioning but can't have interactivity with js -->
        <img class="full-viewport object-cover absolute remove-white-background" src="../svg/left-light.svg" />

Image in full size:

Resized image:

The SVG follows the image in a way that the green light always keep above the right position.

But I want to interact with this light, and to get this, apparently I need to use a different tag like the pure <svg> inside the HTML or something like <object>

And there's the problem: When I use these specific tags, the SVG doesn't follow perfectly the image. I've already tried to use svg with viewBox and preserveAspectRatio attributes, but nothing changed.

Image in full size and with <object> tag:

Resized image (with <object> tag):

Full HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="../css/lightTest.css"/>
  </head>
  <body>
    <main class="full-viewport relative">
      <div class="full-viewport object-cover relative">
        <img class="full-viewport object-cover absolute" src="https://i.postimg.cc/j2CWcLQN/cafe-night.png" />

        <!-- works good - ideal positioning but can't have interactivity with js -->
        <img class="full-viewport object-cover absolute remove-white-background" src="../svg/left-light.svg" />

        <!-- doesn't work (object tag) - can interact with js but positioning doesn't follow the object-fit -->
        <!-- <object class="full-viewport object-cover absolute remove-white-background" data="../svg/left-light.svg" type="image/svg+xml"></object> -->

        <!-- doesn't work (svg with preserveAspectRatio) - can interact with js but positioning doesn't follow the object-fit -->
        <!-- <svg class="full-viewport absolute remove-white-background" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" style="
        background: 
        linear-gradient(76deg, transparent 40.25%, white 40.5%), 
        linear-gradient(14.7deg, transparent 62.3%, white 0%),
        linear-gradient(-5deg, transparent 32% , rgb(50, 221, 137), rgb(0, 255, 255));">
          <rect x="0" y="0" fill="transparent" />
        </svg> -->
      </div>
    </main>

  </body>
</html>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .absolute {
    position: absolute;
  }
  
  .relative {
    position: relative;
  }
  
  .full-viewport {
    height: 100vh;
    width: 100vw;
  }
  
  .object-cover {
    object-fit: cover;
  }
  
  .remove-white-background {
    mix-blend-mode: darken;
  }

Left light svg:

<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg" style="
width:1920px;
height:1080px;
background: 
linear-gradient(76deg, transparent 40.25%, white 40.5%), 
linear-gradient(14.7deg, transparent 62.3%, white 0%),
linear-gradient(-5deg, transparent 32% , rgb(50, 221, 137), rgb(0, 255, 255));">
  <rect width="1920" height="1080" x="0" y="0" fill="transparent" />
</svg>

How to get the same result of an svg inside <img> tag using <object> or pure <svg>?

0 Answers