连接 SVG 矩形

Connecting SVG rectangles

本文关键字:矩形 SVG 连接      更新时间:2023-09-26

我想得到一些关于如何在JavaScript创建的SVG矩形之间建立动态连接的想法。我已经创建了矩形,我甚至可以通过将它们拖放到特定区域来从网站创建它们。

我现在的问题是如何连接它们?目标是将它们连接起来,以便当我移动一个矩形时,该矩形和他的子矩形之间的链接不会消失或保持静态,并动态地使子矩形跟随其父位置。

我希望父 ID> 为 0 的对象在它们与其父对象之间有一个链接。我正在分享一些代码,以便您了解我在做什么。

此致敬意!

$.each($.parseJSON(objString1), function (idx, obj) {

                rect = document.createElementNS(svgNS, 'rect');

                if (obj.ParentId == 0) {
                    rect.setAttribute('id', "rec1");
                    rect.setAttribute('x', 224);
                    rect.setAttribute('y', 34);
                    rect.setAttribute('width', 188);
                    rect.setAttribute('height', 68);                    
                    rect.setAttribute('class', "draggableOrgUnit");
                    rect.setAttribute('transform', "matrix(1 0 0 1 0 0)");
                    rect.setAttribute('onmousedown', "selectElement(evt)");
                    recpai = "rec1";
                }
                else if (obj.ParentId == 1)
                {
                    for (i = 0; i < length; i++)
                    {
                        if (arr[i] != 1)
                        {
                            arr[i] = 1;
                            x = 80 + i * 200;
                            var currentid = i;
                            break;
                        }
                    }
                    rect.setAttribute('id', "rec" + obj.ChartId);
                    rect.setAttribute('x', x);
                    rect.setAttribute('y', 190);
                    rect.setAttribute('width', 110);
                    rect.setAttribute('height', 60);
                    rect.setAttribute('fill', '#95B3D7');
                    rect.setAttribute('class', "draggablePos");
                    rect.setAttribute('transform', "matrix(1 0 0 1 0 0)");
                    rect.setAttribute('onmousedown', "selectElement(evt)");

               }                  

                else
                {
                    rect.setAttribute('id', "rec" + obj.ChartId);
                    rect.setAttribute('x', 80.5);
                    rect.setAttribute('y', 268);
                    rect.setAttribute('width', 90);
                    rect.setAttribute('height', 60);
                    rect.setAttribute('fill', '#404040');
                }
                svg.appendChild(rect);
            });
            div.append(svg);

我认为最好的方法是将元素附加到<g>元素并翻译<g>而不是单个元素。