How To Draw Svg On Image?

I have a image, and i have cordinates (x1,y1),(x2,y2),(x3,y3),(x4,y4) to draw a svg/rectagle on image, how to draw? I have tried using svg tag in img tag, but it does not work, the

Solution 1:

If I understand correctly OP then so and look at the comments in the code.

<style>.container {
width:100vw;
height:100vh;
}
</style><divclass="container"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 1055 717"preserveAspectRatio="xMinYMin meet"  ><!-- Add image --><imagexlink:href="https://i.stack.imgur.com/ORJ3b.jpg"width="100%"height="100%" /><!-- Add a red rectangle over the image. --><rectx="540"y="134"width="150"height="100"fill="none"stroke="red"stroke-width="2" /><!-- Add text --><textx="550"y="200"font-size="48px"font-family="sans-serif"font-weight="700"fill="white" >TEST </text></svg></div>

UPDATE

If a square over the image is needed to focus on one or more fragments of the image, then you can use it repeatedly but add individual tooltips <tooltip>

A tooltip pops up when you hover and hold the cursor on the red square

.container {
width:100vw;
height:100vh;
}
.rect {
fill:transparent;
stroke:red;
stroke-width:2;
}

<divclass="container"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 1024 768"preserveAspectRatio="xMinYMin meet"  ><!-- Add image --><imagexlink:href="https://i.stack.imgur.com/uOg10.jpg"width="100%"height="100%" /><!-- Add a red rectangles over the image. --><g><!-- Tooltip pops up on hover --><title> Young lioness </title><rectclass="rect"x="160"y="220"width="170"height="170"rx="15" /></g><g><title>  Young lion </title><rectclass="rect"x="475"y="200"width="200"height="220"rx="15"/></g></svg></div>

Solution 2:

You can consider using calc() and some CSS variables to find the width/height:

:root {
  --x1:200;
  --x2:100;
  --x3:150;
  --x4:200;
}

rect {
   x:calc(var(--x1)*1px);
   y:calc(var(--x2)*1px);
   width:calc((var(--x1) + var(--x2))*1px);
   height:calc((var(--x3) + var(--x4))*1px);
}

<svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="100%"height="100%"viewBox="0 0 1055 717"preserveAspectRatio="xMinYMin meet"  ><rectfill="none"stroke="red"stroke-width="2" /></svg>