Javascript 连接2个svg元素

关于svg元素的协调系统有很多问题，但没有人能让我解决我的问题

看看这把小提琴：

在启动函数中，我添加了

connect（“A”，“B”）

，它将元素A和B与行连接起来。 当我尝试

连接（“A”，“D”）

时，由于元素D的transform属性，该行的位置不正确

有人能给我一个明确的解决方案吗？ 我不想使用svg库，我只想用简单的javascript代码来解决这个问题，最好是将它添加到fiddle中

---

非常感谢您的

getMid

函数需要考虑矩形的变换矩阵

function getMid (rect, svg) {
  let point = svg.createSVGPoint();
  point.x = rect.x.baseVal.value + rect.width.baseVal.value / 2;
  point.y = rect.y.baseVal.value + rect.height.baseVal.value / 2;
  return point.matrixTransform(svg.getScreenCTM().inverse().multiply(rect.getScreenCTM()));
}

请注意新的

svg

参数。这是您的

SVGSVGElement

。在小提琴中，您可以用

document.getElementById（'Laag_1'）

抓住它

---

通常，我会引用MDN的相关页面，但缺少SVG文档。我不得不把这件事从我的手上拼凑起来。关键是搜索“svg获取变换矩阵”并从那里跟踪兔子洞。

这是迄今为止最正确、最有用的答案，它可能服务于社区。我搜索了很多，找到了多个使用正则表达式和自定义函数的变通方法，但都不起作用。我的问题终于解决了。 我用AuxTaco的答案和jcaron建议的getCTM（）调整更新了fiddle。谢谢大家

function getMid(rect, svg){
        var point = svg.createSVGPoint();
        point.x = rect.x.baseVal.value + rect.width.baseVal.value / 2;
        point.y = rect.y.baseVal.value + rect.height.baseVal.value / 2;
        return point.matrixTransform(svg.getCTM().inverse().multiply(rect.getCTM()));
    }

---

getCTM

将使您能够获得（累积）变换矩阵，您可以将其应用于坐标。您可能还需要应用SVG的逆矩阵。SVG的逆矩阵是什么？

svgelement.getCTM（）.inverse（）

实际上，当更改SVG的百分比大小时，行位于不同的位置。你知道如何解决这个问题吗？通过强制执行

svg

、

rect

、

getCTM（）

、

getScreenCTM（）

、

inverse（）

、和

multiply（）

，是的！我的大脑不是。。。我建议您避免使用

getScreenCTM

，因为实现有缺陷，而且浏览器之间不一致。在这种情况下，使用

getCTM

应该是合适的。@jcaron在Firefox中测试时，

svg.getCTM（）

为空，

返回点.matrixtTransform（svg.getScreenCTM（）.inverse（）.multiply（rect.getCTM（））产生不正确的结果<代码>返回点.matrixTransform（rect.getCTM（）），我的原始答案，根据SVG的CSS大小产生不正确的结果。从我的手机回复，所以不能真正测试，但你应该需要两个矩阵（元素和SVG），它们都来自同一个函数。奇怪的是，getCTM在SVG元素上返回null。一个解决方法可能是在SVG中添加一个并使用它？