在两个元素之间画一条连接线

2024-06-02 20:57| 来源: 网络整理| 查看: 265

对我来说，使用svgs加入行是值得一试的，而且它工作得很完美……首先，可伸缩矢量图形( Scalable Vector Graphics，SVG)是一种基于XML的二维图形矢量图像格式，支持交互性和动画。SVG图像及其行为在XML文本文件中定义。您可以使用标签在HTML中创建一个svg。Adobe Illustrator是使用路径创建复杂svg的最佳软件之一。

使用一行连接两个div的过程：

need

时，创建两个div，并为它们提供任意位置

Line标签允许我们在两个指定点(x1，y1)和(x2，y2)之间画一条线。(有关参考信息，请访问w3schools。)我们还没有指定它们。因为我们将使用jQuery编辑行标记的属性(x1、y1、x2、y2)。

in tag write

line1 = $('# div1 ')；div1=$(‘#DIV1’)；div2 = $('#div2')；

我使用选择器来选择两个div和line...

var pos1 = div1.position()；var pos2 = div2.position()；

jQuery position()方法允许我们获得元素的当前位置。有关详细信息，请访问https://api.jquery.com/position/ (也可以使用offset()方法)

现在我们已经获得了我们需要的所有位置，我们可以像下面这样画一条线…

代码语言：javascript复制line1 .attr('x1', pos1.left) .attr('y1', pos1.top) .attr('x2', pos2.left) .attr('y2', pos2.top);

jQuery .attr()方法用于更改所选元素的属性。

我们在上面的代码行中所做的就是将line的属性从

代码语言：javascript复制x1 = 0 y1 = 0 x2 = 0 y2 = 0

至

代码语言：javascript复制x1 = pos1.left y1 = pos1.top x2 = pos2.left y2 = pos2.top

由于position()返回两个值，一个是'left‘，另一个是'top'，我们可以使用.top和.left通过对象(这里是pos1和pos2)轻松地访问它们……

现在，line标签有两个不同的坐标来在两点之间绘制直线。

提示:在需要div时添加事件侦听器

提示:在脚本标记中写入任何内容之前，请确保先导入jQuery库

通过JQuery添加坐标后的 ...它看起来会像这样

以下代码片段仅用于演示目的，请按照上述步骤获得正确的解决方案

代码语言：javascript复制

【本文地址】

公司简介

联系我们