在两个svg矩形之间绘制动态线

在两个SVG矩形之间绘制动态线，可以使用SVG的<line>元素来实现。下面是一个完善且全面的答案：

SVG（Scalable Vector Graphics）是一种基于XML语法的2D矢量图形格式，可以用来描述静态和动态的图形和图像。它可以在网页中直接嵌入，并且具有高度可伸缩性和清晰度，适用于各种屏幕分辨率。

要在两个SVG矩形之间绘制动态线，可以按照以下步骤进行操作：

创建SVG元素：在HTML中添加一个<svg>元素，并设置其宽度和高度，以及命名空间。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
</svg>

创建矩形元素：使用<rect>元素创建两个矩形，并设置它们的位置、大小和样式。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <rect x="50" y="50" width="100" height="100" fill="#FF0000"/>
    <rect x="300" y="200" width="150" height="80" fill="#00FF00"/>
</svg>

创建动态线元素：使用<line>元素创建动态线，并设置起点和终点的坐标，以及线的样式。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <rect x="50" y="50" width="100" height="100" fill="#FF0000"/>
    <rect x="300" y="200" width="150" height="80" fill="#00FF00"/>
    <line x1="100" y1="100" x2="375" y2="240" stroke="#0000FF" stroke-width="2"/>
</svg>

添加动画效果：使用SVG的动画属性来给线条添加动画效果，例如使用<animate>元素来改变线的坐标或样式。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <rect x="50" y="50" width="100" height="100" fill="#FF0000"/>
    <rect x="300" y="200" width="150" height="80" fill="#00FF00"/>
    <line x1="100" y1="100" x2="375" y2="240" stroke="#0000FF" stroke-width="2">
        <animate attributeName="x2" attributeType="XML" from="375" to="425" dur="1s" fill="freeze"/>
    </line>
</svg>

以上是一个简单的例子，实际上可以根据需求添加更复杂的动画效果或使用JavaScript等编程语言来控制动画。

腾讯云提供了云计算相关的产品和服务，可以使用腾讯云的对象存储 COS（Cloud Object Storage）来存储SVG文件，使用腾讯云的CDN（Content Delivery Network）来加速SVG文件的传输，以及使用腾讯云的云服务器 CVM（Cloud Virtual Machine）来部署网页。具体产品介绍和链接如下：

腾讯云对象存储（COS）：可用于存储SVG文件，提供高可靠性和可扩展性的云端存储服务。产品介绍链接：https://cloud.tencent.com/product/cos
腾讯云内容分发网络（CDN）：可加速SVG文件的传输，提供全球分布式的加速节点，提高网页加载速度和用户体验。产品介绍链接：https://cloud.tencent.com/product/cdn
腾讯云云服务器（CVM）：可用于部署网页和处理SVG文件的动态生成和动画效果，提供高性能和可靠性的云端虚拟机服务。产品介绍链接：https://cloud.tencent.com/product/cvm

请注意，以上链接仅为腾讯云产品介绍，不包含其他云计算品牌商。

在两个svg矩形之间绘制动态线

、

我有绘制2SVG的this代码，可以根据显示的输入文件灵活地调整每个矩形的起点和结束点。我可以画一条线从顶部矩形的末端到底部矩形的开头，这样即使2个矩形的位置已经使用上面的输入字段进行了调整，这条线也会保持连接。 = document.createElementNS("http://www.w3.org/2000/svg", "svg"

浏览 44提问于2021-01-31得票数 1

回答已采纳

1回答

我正在用Blazor制作一个图形库，它使用HTML节点和SVG链接。我想知道如何在两个节点之间绘制链接，而它们并不总是矩形的。我找到的所有解决方案都是基于矩形/正方形的节点，在这些节点上很容易在边界(甚至中心，但只适用于直接链接)上绘制链接。但是，如果节点中包含使其成为非矩形的自定义内容，例如带有border-radius: 50%的div，该如何处理呢一种可能的解决方案是绘制从元素中心到元素中心的<em

浏览 28提问于2020-11-03得票数 0

1回答

如何从路径中移除线？

、、

我从canvas.drawPath() (画布画布)方法中调用视图来绘制路径。它在路径上画了一条线。在我的示例中，我将使用Path.addRect(RectF，Direction.CCW)在路径上绘制矩形。它工作得很好，但它用线画了一个矩形。所以显示了两个矩形之间的线。我只想从路径中删除直线，只绘制矩形。有没有办法从路径中移除线

浏览 2提问于2013-07-23得票数 0

1回答

Qt，C++绘制两个对象之间的连接线

、

我想在QGraphicsScene上使用mouseClick动态地在两个矩形之间画一条线。这条线不能倾斜。直线的每条线段必须彼此垂直，就像PowerPoint中的弯头连接器一样。如果鼠标沿倾斜方向移动，则在绘制线条时，线条应自动重新对齐。如果QGraphicsLineItem在场景中绘制，它可以只是一条直线。我设法做到了这一点，但无法拆分成2个或更多的线段。

浏览 41提问于2017-08-15得票数 2

回答已采纳

0回答

使用javascript在不同容器中绘制svg元素

、、

我有两个svg容器，我想在两个容器中绘制不同的svg元素。让我们假设：<div><svg height=&qu

浏览 0提问于2016-07-12得票数 0

1回答

我怎么能用画布画一条线到显示的特定坐标.(绝对cordinate)

、、、、

我是画布和svg的新手。我想在特定坐标之间画一条画布或svg线，例如，我有两个矩形，我必须在它们之间画一条线(在这种情况下，我必须使这条线中心由两个矩形组成)。 HTML： <svg version="1.1" id="line_2" xmlns="http:/&#x

浏览 1提问于2022-01-10得票数 2

回答已采纳

1回答

以编程方式在delphi绘图网格和合并单元格中绘制线条

、、

我想禁用绘图网格中的网格线，并为每隔一列自己绘制网格线。不需要行线。我想合并固定区域中的两个单元格，这样看起来就像是一列，如下图所示：我将此代码添加到drawgrid的ondrawcell事件中以实现此目的： procedure Tbookings3_Frm.bgridDrawCell

浏览 1提问于2013-06-27得票数 0

1回答

向矩形绘制直线但恰好在该矩形之前终止的算法

我有两个正方形，我想在它们之间画一条线，但这两条线应该在到达矩形周长之前终止。请参见下图，了解我的意思。如果延伸这些线，它们将从每个正方形的中心开始。我的问题是，在计算机图形学中，是否有标准的方法来处理这个问题？在过去，我在可见矩形周围绘制了一个较大的不可见矩形，然后查找该线与不可见矩形的哪个边相交。我使用交点作为起点和终点坐标来绘制直线。我还需要一个

浏览 0提问于2020-04-19得票数 0

1回答

Svg绘制两个矩形之间的连接线

、、、

我目前正在用javascript用SVG编写一个图表编辑器。正如你在下面的图片中所看到的，我对自己做了一些思考，但我没有完成最后一步。我只想划一条标有红色的线。稍后，我想拖动

浏览 0提问于2018-05-09得票数 11

回答已采纳

1回答

HTML:连接到来自不同SVG的元素

、、、、

我有一个有三个SVG的网站。现在，我想显示不同svg中的元素之间的连接。因此，我必须在干净的html

浏览 0提问于2016-11-01得票数 0

1回答

如何从用户输入中动态计算和绘制画布边框？

、、、、

我的要求是在SVG中绘制矩形，我已经通过d3库实现了这一点。this.borderHeight = 400; //(dynamic value); var svg= d3.select(this.child.canvas.current).append('svg') .attr('id','Pr

浏览 1提问于2020-11-18得票数 0

1回答

在android中动态绘制箭头

我正在开发一个应用程序，其中我想使不同的形状，如箭头，矩形，线，自由绘制等动态手指触摸，我能够绘制线，自由绘制，矩形，但我没有得到箭头。我也在谷歌搜索了很多，但没有找到任何relevant.Please建议，如果有人有一个解决方案。

浏览 9提问于2012-09-14得票数 2

1回答

检测vector2是否介于其他两个vector2之间

、

正如标题所示，我在尝试不同的方法，但没有解决问题。我需要检查鼠标是否在PlayMode中的两个2d点之间。我想使用rect动态地在两个vector2之间构建一个矩形，并使用rect.contains检查鼠标位置是否在矩形内。如果矩形是水平的，但屏幕上的点是不对齐的，而且在我看来没有办法创建斜矩形，这是可行的。我试着计算两个点之间

浏览 2提问于2019-12-23得票数 2

回答已采纳

2回答

SVG:在边缘到边缘的黑色形状之间不经意地出现白色边缘。

、

我想要创建一个svg文件，这个文件恰好有平行的黑色方格，它们彼此相邻，之间没有空间。我创建了这样一个简单的svg文件：<html> <path d="M150 0 L200 0 200 100 L150 100Z" /> <path d="M200 0 L250

浏览 4提问于2016-03-30得票数 1

回答已采纳

1回答

是否绘制路径而不覆盖现有形状？

、、、、

我有一个组织布局，其中有矩形形状，而不是在有序的网格。如果它是一个网格，我会使用A- star代码。那么，如何在不干扰节点(矩形)之间的情况下连接两个节点(即两个矩形)。我只想让算法找到绘制路径的坐标，这样我就可以在生成SVG文件时使用它。

浏览 1提问于2011-10-12得票数 3

回答已采纳

2回答

是否可以在svg文件上绘制形状

、、、

我需要在现有的svg上动态绘制矩形、圆形等形状。即当我点击svg时，它会选择并突出显示svg中的特定路径。然后我想要在突出显示的区域绘制形状。如何做到这一点？

浏览 1提问于2013-04-03得票数 0

3回答

将正方形或矩形分解为大量随机大小的正方形或矩形

、、、

我试图将一个正方形或矩形分解成大量随机大小的正方形或矩形，这样就没有一个是重叠的。解决方案似乎要么是通过装箱，要么是通过某种树映射。

浏览 0提问于2011-10-13得票数 4

回答已采纳

1回答

在AS3中绘制矩形时，边框部分脱离屏幕

我在0,0处绘制一个矩形，线条样式粗细为4px。它的高度为100%，宽度为50%。右边的边缘有一个4px宽的边框，但其他3个边都只有2px，这表明边缘的中点被归类为边框。为什么不把边画在矩形的内部？

浏览 0提问于2011-01-11得票数 0

回答已采纳

1回答

IE10-11中SVG的对象重叠问题

我在IE 10和IE 11中遇到了一些对象与SVG重叠的问题。为了理解这个问题，我创建了一个简单的矩形和线条的html文件。我们已经使用SVG来绘制线条元素。这里显示了线的一半，但是覆盖矩形的线的其余部分是不可见的，即使线的z索引高于矩形。这是HTML文件的内容，<head><svg version="1.1&quo

浏览 0提问于2014-06-25得票数 0

1回答