html - 如何在图像上绘制 svg？

Question

我有一个图像，我有(x1,y1),(x2,y2),(x3,y3),(x4,y4)坐标在图像上绘制一个 svg/rectagle，如何绘制？我曾尝试在标签中使用 svg 标签img，但它不起作用，主要是如何使用这些坐标设置 svg(rect svg) 的宽度和高度。

<svg version="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"  >  


<rect x="540" y="134" width="150" height="100" fill="none" stroke="red" stroke-width="2" />
</svg>

标签： htmlcsssvg

Answer 1

如果我正确理解 OP，那么请查看代码中的注释。

<style>
.container {
width:100vw;
height:100vh;
}
</style>
<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 1055 717" preserveAspectRatio="xMinYMin meet"  >  
    <!-- Add image -->
<image xlink:href="https://i.stack.imgur.com/ORJ3b.jpg" width="100%" height="100%" /> 
    <!-- Add a red rectangle over the image. -->
<rect x="540" y="134" width="150" height="100" fill="none" stroke="red" stroke-width="2" /> 

      <!-- Add text -->
<text x="550" y="200" font-size="48px" font-family="sans-serif" font-weight="700" fill="white" >TEST </text>
</svg>
</div>

更新

如果需要在图像上放置一个正方形来聚焦图像的一个或多个片段，那么您可以重复使用它，但添加单独的工具提示<tooltip>

将光标悬停在红色方块上时会弹出一个工具提示

.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>