如何在图像上绘制svg? [英] How to draw svg on image?

问题描述

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

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 main thing is how to set width and height of svg(rect svg) using those cordinates.

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

推荐答案

如果我对OP的理解正确，那么请看一下代码中的注释.

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

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

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;
}

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

这篇关于如何在图像上绘制svg?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！