Javascript 如何使用SVG绘制直线？

如何使用SVG画一条连接两个图像的线？。例如，我想画一条线来连接$1和$2（假设$1和$2是图像）：

是否需要Javascript

谢谢

您可以轻松地将其放置在图像之间：

试试这个：

---

您可以在两个图像之间画一条线，如

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

很抱歉，您的浏览器不支持内嵌SVG。

如果你想把线条和图像联系起来？ 尝试使用CSS相对属性完成此操作

---

您可以找到帮助

是否需要javascript？取决于这些图像的动态程度定义动态请非静态，在设计时不在已知位置是不是静态视口是什么？视口是SVG图像的可见区域。SVG图像在逻辑上可以是您想要的宽度和高度，但一次只能看到图像的特定部分。可见的区域称为视口最后一个问题，“0 0 100 100 100”中的100是做什么的？第一个是宽度，第二个是高度（左、上、宽、高）哦，好的，知道了：）但是习惯定位：相对留下空白？不是你可以添加一个类来覆盖空间，使用CSS定位，如[

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