如何连接SVG标签中的两个元素？

我有一个中心的SVG标签，其中多个元素，如矩形，圆等动态绘制。我怎样才能连接这两个。如何连接SVG标签中的两个元素？

我尝试使用jsPlumb但this页面在jsPlumb博客指出

的问题您无法连接直接在两个矩形元素（或任何SVG图形）。这是因为SVG元素中的图形与其他所有DOM元素没有相同的定位信息。所以，现在考虑你有这样的标记：

我一直在研究，因为两天寻找一种方式，但所有的库或者一起两个div或两个SVG标签连接在一起。有没有办法将SVG ELEMENTS连接在一起？

来源

2016-06-08 Arihant

-1

我认为您的link（在“解决方案”一节中）描述了一个解决方案。您需要定义计算每个形状的偏移量的方法，然后重写一些jsPlumb方法（getOffset和getSize）。

然后，您将能够使用JSplumb连接矩形。

来源

2016-06-08 14:11:13

我读过。我将会有很多不同类型的形状，即使是自定义的形状，所以定义每个形状的坐标或偏移也不会很有效 – Arihant

找出自定义形状的偏移也不难。您只需获得每个方向上形状上最远点的四个坐标 - 最顶端，最右端，最底端，最左端（以“{x，y}”格式）。然后使用宽度“rightmost.x-leftmost.x”和高度“bottommost.y-topmost.y”来计算偏移量，就像使用矩形的宽度和高度来计算偏移量一样。 – Tex

您可能想要使用提供'getBBox（）'（获取边界框）函数的SVG库，或者自行编写一个函数库。边界框应该是一个矩形，其四个坐标为[[leftmost.x，topmost.y]，[rightmost.x，topmost.y]，[rightmost.x，bottommost.y]，[leftmost.x，bottommost。 Y]]'。您使用的'getBBox（）'实现需要足够通用以返回任何形状的边界框，您将需要找到偏移量，在这种情况下，您可以取消每个形状的计算器并仅使用每个形状的边界框来计算你的偏移量。 – Tex

如何连接SVG标签中的两个元素？

回答

相关问题