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

Answer 2

试试这个：

＆＃13;

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

＆＃13;

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

Answer 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

如何使用SVG绘制线条？

3 个答案: