Question

关于svg元素的coördinate系统存在很多问题，但没有人让我解决我的问题。

看看这个小提琴： https://jsfiddle.net/archemedia/4f54jnm8/

在启动功能中，我添加了connect("A", "B")，它将元素A和B与线连接起来。当我尝试connect("A", "D")时，由于元素D的transform属性，该行未正确定位。

有人能为我提供明确的解决方案吗？我不想使用svg库，我只想要解决问题的简单javascript代码，最好是将它添加到小提琴中。

非常感谢

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。在小提琴中，您可以使用document.getElementById('Laag_1')抓住它。

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

Answer 2

这是迄今为止最正确和最有用的答案，它可能为社区提供服务。我经常搜索并使用正则表达式和自定义函数进行了多次变通，所有这些都无法正常工作。我的问题终于解决了。我用AuxTaco的答案和jcaron建议的getCTM（）调整更新了小提琴。谢谢大家！

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()));
    }

https://jsfiddle.net/archemedia/4f54jnm8/2/

连接2个svg元素

2 个答案: