连接 SVG 矩形
Connecting SVG rectangles
我想得到一些关于如何在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>
而不是单个元素。
相关文章:
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 我的svg矩形移动
- 使用捕捉.svg具有多个孔的 SVG 矩形
- 将 SVG 路径雕刻成矩形,在矩形中留下一个“孔”
- 使用D3.js的SVG圆周围的矩形之间的间隙不是通用的
- svg矩形不同边上的标签
- 如何在单击事件时在SVG上绘制矩形
- 创建 SVG 和矩形不起作用
- 无法更改三个容器中的 SVG 矩形属性
- 如何检测 SVG 中的鼠标悬停矩形
- D3JS绘制SVG矩形和线条问题
- 咏叹调网格单元格标签在 SVG 矩形内始终为空白
- 如何在 D3 svg 矩形中显示数据映射
- 如何使用 CreateSVGRect 在 SVG 文档中创建样式矩形
- 如何将 svg 图像附加到另一个 svg 图像的矩形元素
- 获取矩形,用Raphael和Handdrawn.js填充svg
- 从svg - javascript中移除特定颜色的矩形
- 快速信息矩形SVG对象/Raphael JS
- SVG的矩形边框,而不是笔画
- 查找矩形svg的中心坐标