将SVG线从div连接到div

Question

有没有办法，用SVG绘制线连接两个div，但是使用div维度的坐标... 我会尽力说清楚：

如果div具有以下属性：

#divR {
   background-color: red;
   width: 350px;
   height: 300px;
   /*Im trying to avoid divs positions*/
}

#divB {
   background-color: blue;
   width: 350px;
   height: 400px;
   /*Im trying to avoid divs positions*/
}

这是SVG行的默认html代码：

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

我的问题是，如何将div的大小设置为redbox宽度x1="350"的边缘，高度的一半y1="150"以及bluebox x2="0"和{ {1}}。

以下是我为帮助理解这一点而做的图片：

我希望我足够清楚......：S