javascript - 如何使用 SVG 画线？

Question

如何使用 SVG 绘制连接 2 个图像的线？。例如我想画一条线连接 $1 和 $2(假设 $1 和 $2 是图像):

$1
    $2

是否需要 Javascript？

谢谢!

Answer 1

您可以轻松地 draw a line with SVG并将其放置在您的图片之间:

<img src="http://placehold.it/100x100">
<svg width="100" height="100" viewPort="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="20" x2="100" y2="80" stroke-width="2" stroke="black" />
</svg>
<img src="http://placehold.it/100x100">