How to draw a rectangular frame using JS around an image fragment

问题

The question is inspired by this topic.

I know how to draw a rectangular frame around the selected image fragment.
I also know how to implement a tooltip when hovering over a red frame.
Below is my code with the result of what I want to get as a result

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

<div class="container">
<svg version="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 -->
<image xlink: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>
   <rect class="rect" x="160" y="220" width="170" height="170" rx="15" /> 
</g> 
  <g> 
    <title>  Young lion </title>
     <rect class="rect" x="475" y="200" width="200" height="220" rx="15"/> 
  </g>
 
 
</svg>
</div>

By searching, I found that similar tasks - calculating the size of the container of an object are solved using the JS bbox command

How to implement the dynamic appearance of a bounding box around an image fragment when you click on this fragment?

How to implement the appearance of a tooltip when you hover over this fragment inside the red frame?

来源：https://stackoverflow.com/questions/59086695/how-to-draw-a-rectangular-frame-using-js-around-an-image-fragment

标签

javascript

html

css

svg

canvas