getBoundingClientRect坐标vs SVG

Question

我试图通过svg行连接它们来显示项目之间的关系。当我的面板容器和svg元素都在位置（0,0）时，一切都按预期工作。但如果它们都移动到文档上的另一个位置，则坐标系似乎不同步。

我通过定义

解决了这个问题

svg{
min-width:100%;
min-height:100%;
z-index: 2;
top:0;
left:0;
position:fixed;
}

但这感觉超级黑客。

如何让我的getBoundingClientRect坐标（绝对坐标）与SVG坐标（相对于父位置）同步？

我的JS代码：

var panel1 = angular.element(document.querySelector("#panel1"))[0].getBoundingClientRect();
var panel2 = angular.element(document.querySelector("#panel6"))[0].getBoundingClientRect();


element.find("svg").append(SVGTemplatesService.line(
       panel1.right,
       panel1.top + (panel1.height / 2),
       panel2.left,
       panel2.top + (panel2.height / 2)));

并且实际绘图在这里发生：

function SVGTemplatesService(){

    var line = function(x1,y1,x2,y2,color){
        color = color || '#333';
        var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
            newLine.setAttribute('x1',x1);
            newLine.setAttribute('y1',y1);
            newLine.setAttribute('x2',x2);
            newLine.setAttribute('y2',y2);
            newLine.setAttribute('style','stroke-width: 5px; stroke: ' + color);
        return newLine;
    };

    return {
        line: line
    }
}