如何转换 SVG 路径

Question

我正在使用SVG路径在两个角度材质树组件之间绘制连接线。我有一个问题，因为当我展开树节点时，路径向上或向下移动，但我希望它保持在同一位置。当我折叠树节点时，我想将路径从子节点移动到父节点。

我尝试过转换：翻译或矩阵，但我不知道如何计算值。

我应该使用转换还是编辑路径的"d"属性？

这就是我创建 svg 的方式：

createSVG() {
let svgContainer = document.getElementById('svg-main-container');
this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");                                                    
this.svg.setAttribute('id', 'svg-canvas');
this.svg.setAttribute('style', `position:absolute;left:0;top:0;display:inline-block;height:100%;width:100%`);
this.svg.setAttribute('viewBox', '0 0 100 100');
this.svg.setAttribute("preserveAspectRatio", "none");
this.svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
svgContainer.appendChild(this.svg);
this.svgService.svg = this.svg;
return this.svg;
}

这是我绘制连接路径的方式：

drawConnector(a,b){
let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
let d = `M${a.x_left},${a.y_left} C50,${a.y_left} 50 ${b.y_right} ${b.x_right} ${b.y_right}`;
path.setAttributeNS(null, "d", d);
path.setAttributeNS(null, "fill", "none");
path.setAttributeNS(null, "stroke", "#555");
path.setAttributeNS(null, "stroke-width", "1.5px");
path.setAttributeNS(null, "vector-effect", "non-scaling-stroke");
path.setAttribute("id", this.svgService.draggedElementId);
path.setAttribute("class", this.svgService.draggedElementId);
this.svgService.svg.appendChild(path);
}

我如何连接元素：

connectDivs(leftId, rightId, color, tension) {
leftId = this.svgService.draggedElementId
rightId = this.svgService.droppedElementId
this.svgService.connections.push({leftId,rightId});
let svgContainer = document.getElementById('svg-component');
let mainBox = svgContainer.getBoundingClientRect();
let points = [];
//left element
let left = document.getElementById(leftId);
let leftPosition = left.getBoundingClientRect()
let x_left = this.mapCoordinates(leftPosition.left - mainBox.left + leftPosition.width/2, mainBox.left, mainBox.left + mainBox.width, 0, 100);
let y_left = this.mapCoordinates(leftPosition.top - mainBox.top + leftPosition.height/2, mainBox.top, mainBox.top + mainBox.height, 0, 100);
points.push({x_left, y_left});
//right element
let right = document.getElementById(rightId);
let rightPosition = right.getBoundingClientRect()
let x_right = this.mapCoordinates(rightPosition.left - mainBox.left + rightPosition.width/2, mainBox.left, mainBox.left + mainBox.width, 0, 100);
let y_right = this.mapCoordinates(rightPosition.top - mainBox.top + rightPosition.height/2, mainBox.top, mainBox.top + mainBox.height, 0, 100);
points.push({x_right, y_right});
this.drawConnector(points[0], points[1]);
}

以及我如何在树扩展时尝试转换路径：

expandLines(node){
let nodeElement = document.getElementById(node.id);
let svgContainer = document.getElementById('svg-main-container');
let svgBox = svgContainer.getBoundingClientRect();
let nodePosition = nodeElement.getBoundingClientRect() //position of collapsed/expanded tree element
let x_node = this.mapCoordinates(nodePosition.left - svgBox.left + nodePosition.width/2, svgBox.left, svgBox.left + svgBox.width, 0, 100);
let y_node = this.mapCoordinates(nodePosition.top - svgBox.top + nodePosition.height/2, svgBox.top, svgBox.top + svgBox.height, 0, 100);
let svgCanvas = document.getElementById('svg-canvas');
let svgCanvasBox = svgCanvas.getBoundingClientRect();
let path = svgCanvas.getElementsByClassName(node.id)[0];
let pathPosition = path.getBoundingClientRect();
let x_path = this.mapCoordinates(pathPosition.left - svgCanvasBox.left + pathPosition.width/2, svgCanvasBox.left, svgCanvasBox.left + svgCanvasBox.width, 0, 100);
let y_path = this.mapCoordinates(pathPosition.top - svgCanvasBox.top + pathPosition.height/2, svgCanvasBox.top, svgCanvasBox.top + svgCanvasBox.height, 0, 100);
let trans_x = x_path + x_node;
let trans_y = y_path - y_node;
//path.setAttribute('transform',`translate(${trans_x}, ${trans_y})`);
path.setAttribute('transform', `matrix(1,0,0,1,${trans_x},${trans_y})`);
}
mapCoordinates(n, a, b, _a, _b){
let d = b - a;
let _d = _b - _a;
let u = _d / d;
return _a + n * u;
}

我拥有的图片：

我的带路径的树是什么样子的

展开树时会发生什么

Answer 1

您正在将viewBox属性与preserveAspectRatio="none"组合在一起。这具有以下效果：如果容器的大小发生变化，始终设置为填充包含元素高度的<svg>元素会不断重新缩放 SVG 内所有坐标的含义。

当通常的建议是添加 viewBox，在您的特殊情况下，省略这两个属性实际上会有所帮助。<svg>元素本身的坐标系("初始视口")及其内容的坐标系("初始用户坐标系")是两个不同的实体：

每个 SVG 视口都会生成一个视口坐标系和一个用户坐标系，最初是相同的。在视口元素上提供viewBox会相对于视口坐标系转换用户坐标系...

只有在没有viewBox属性的情况下，即使<svg>元素更改其大小，两个坐标系也会重合。

当您的坐标与 SVG 外部的内容相关时(如您的a, b参数)，如果两者之间没有坐标变换，则只有在树大小发生变化时，它们才有机会保持有意义。

您的代码手动执行一些坐标转换，以从屏幕视口坐标获取到假定的 100 * 100 viewBox。删除所有这些。您需要的是连接的项目与<svg>元素的相对垂直位置。水平方向，你只去你的<svg>的两侧：

connectDivs(leftId, rightId, color, tension) {
leftId = this.svgService.draggedElementId
rightId = this.svgService.droppedElementId
this.svgService.connections.push({leftId,rightId});
let svgContainer = document.getElementById('svg-component');
let mainBox = svgContainer.getBoundingClientRect();
let points = [];
//left element
let left = document.getElementById(leftId);
let leftPosition = left.getBoundingClientRect();
// you always want the left side of the <svg> element
let x_left = 0;
let y_left = leftPosition.top - mainBox.top + leftPosition.height/2;
points.push({x_left, y_left});
//right element
let right = document.getElementById(rightId);
let rightPosition = right.getBoundingClientRect();
// the right side of the <svg> element
let x_right = mainBox.width;
let y_right = rightPosition.top - mainBox.top + rightPosition.height/2;
this.drawConnector(points[0], points[1]);
}