如何使用SVG绘制线条？

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

$1 
    $2

，是必要的JavaScript？

谢谢！

来源

2016-09-28 Cabbage

javascript是否需要？取决于这些图像是如何动态的 –

定义动态请 – Cabbage

不是静态的，不在设计时间的已知位置 –

您可以轻松地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">

来源

2016-09-28 06:41:54 andreas

什么是视口？ – Cabbage

视口是SVG图像的可见区域。 SVG图像在逻辑上可以像你想的那样宽和高，但是一次只能看到图像的某个部分。可见的区域称为视口 – andreas

好吧，谢谢你会试试:) – Cabbage

试试这个：

<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

来源

2016-09-28 06:51:19

会试试看，谢谢:)！ – Cabbage

可以得出两个图像之间的线像

<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

来源

2016-09-28 07:01:12

但是不会定位：相对保留一个空格？ – Cabbage

不是你可以添加一个类来覆盖空间使用CSS定位，如[http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute –

如何使用SVG绘制线条？

回答

相关问题