SVG：在两个不同的SVG元素之间拖动对象

我正在开发一个原型来模拟这一点，并提供最小的功能，如

拖放简单对象

通过路径连接相关对象

从这个结构生成JSON

我选择了SVG和Snap.SVG框架（在决定D3和Snap.SVG之间有困难，但最终选择后者，因为它是Raphael的最新版本和继承者）来实现它。在实现过程中，我坚持使用下面的方法

问题1:如何在不同SVG元素之间拖动对象？尝试拖动元素在这种情况下，对象在拖动到其父维度之外时被隐藏。将下面的片段拨弄一下供您阅读

HTML/SVG:
<div class="stencil">
    <svg id="stencil" height="300" version="1.1" width="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg>
</div>
<div class="paper">
    <div class="paper__scroller">
        <svg id="paper" height="1000" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        </svg>
    </div>
</div>

Javascript:
(function(){
    var pap = Snap("#paper"),
        stencil = Snap("#stencil"),
        cir = stencil.circle(30, 50, 20),
        rec = stencil.rect(70, 33, 35, 35);
        stencilElements = stencil.group(rec, cir);

    stencilElements.attr({
        fill: "#f00",
        stroke: "#000",
        strokeWidth: 2,
        "fill-opacity": 0.5
    });

    cir.clone().drag();
    rec.clone().drag();

}());

HTML/SVG：
Javascript:
（功能（）{
var pap=快照（“纸张”），
模具=捕捉（“模具”），
cir=模板圆（30,50,20），
rec=模具矩形（70,33,35,35）；
模具元件=模具组（rec、cir）；
StencileElements.attr({
填写：“f00”，
笔画：“000”，
冲程宽度：2，
“填充不透明度”：0.5
});
循环克隆（）.拖动（）；
rec.clone（）.drag（）；
}());

问题2:如何通过拖动对象时相应调整/移动的路径连接相关对象

问题3:如何将生成的图形/图表转换为JSON结构

---

非常感谢您在执行此操作时提供的任何参考或提示。

据我所知，您无法在SVG之间移动，但您有什么理由2？我想知道，你可能可以摆弄1个父SVG和2个内部SVG或其他东西，让它工作起来。伊恩说，你可以像graffle一样尝试连接器和xml/JSONLIAN。我会将它们嵌入到父SVG中：）@Ian谢谢您提供的详细信息。我想重新表述问题2：通过路径连接相关对象不是通过程序完成的，而是由用户实时完成的。基本上，用户决定要关联哪些对象并在它们之间绘制路径，请分享您关于如何实时绘制路径和连接相关SVG对象的想法。没有理由您不能仍然使用Snaps handler单击2个对象，然后使用graffle在它们之间绘制路径（如果不介意它连接到哪里，你可以在两个物体中心之间画一条路径，但我个人不会重新发明轮子，我会用已经解决问题的东西）。