javascript - 连接 2 个 svg 元素

Question

关于 svg 元素的坐标系统有很多问题，但没有人让我解决我的问题。

看看这个 fiddle : https://jsfiddle.net/archemedia/4f54jnm8/

在启动函数中，我添加了 connect("A", "B") 将元素 A 和 B 与线连接起来。当我尝试 connect("A", "D") 时，由于元素 D 的转换属性，该行没有正确定位。

有人可以为我提供一个明确的解决方案吗？我不想使用 svg 库，我只想要解决问题的普通 javascript 代码，最好是将它添加到 fiddle 中。

非常感谢

Answer 1

您的 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。在 fiddle 中，您可以使用 document.getElementById('Laag_1') 获取它。

_{通常，我会引用 MDN 上的相关页面，但缺少它们的 SVG 文档。我不得不从 a couple 拼凑起来的 SO questions .关键是搜索“svg get transform matrix”并从那里跟随兔子洞。}