如何使用 SVG 画线？答案

【问题标题】：How can I draw a line using SVG?如何使用 SVG 画线？
【发布时间】：2016-09-28 15:01:12
【问题描述】：

如何使用 SVG 绘制连接 2 个图像的线？比如我想画一条线来连接$1和$2（假设$1和$2是图片）：

$1
    $2

需要 Javascript 吗？

谢谢！

【问题讨论】：

需要javascript吗？取决于这些图像的动态程度
请定义动态
不是静态的，在设计时不在已知位置
是的，不是静态的

标签： javascript css html svg

【解决方案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">

【讨论】：

什么是视口？
视口是 SVG 图像的可见区域。 SVG 图像在逻辑上可以随心所欲地宽和高，但一次只能看到图像的特定部分。可见的区域称为视口
最后一个问题，“0 0 100 100”中的100是做什么的？
第一个是宽度，第二个是高度（左、上、宽、高）
哦，好的：）

【解决方案2】：

试试这个：

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

更多 SVG 标签信息here
请注意，SVG 标签可能无法在 IE、Edge 和 Firefox 上正常工作
你也可以使用jsPlumb库Here

【讨论】：

【解决方案3】：

你可以在两张图片之间画一条线

<img scr="http://www.belutics.com/wp-content/uploads/2016/01/sample-placeholder.png" alt="$1"/>
<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  Sorry, your browser does not support inline SVG.
</svg>
<img scr="http://www.belutics.com/wp-content/uploads/2016/01/sample-placeholder.png" alt="$2"/>

如果你想用图像链接线？尝试使用 CSS 相关属性来完成它你可以找到帮助here

【讨论】：

但不会 position:relative 留一个空格？
不是你可以添加一个类来使用 CSS 定位覆盖空间，如 [w3schools.com/css/tryit.asp?filename=trycss_position_absolute