不显示线连接器但显示端点

Line connector not displayed but endpoints are displayed

使用以下内容:

我正在使用拖放创建线路连接器,如本例所示: http://jsfiddle.net/L2sjjc3b/16/

但在我的程序中同样不起作用。我可以看到线路路径是在控制台中创建的,但未显示在输出中。这是我的傻瓜:http://plnkr.co/edit/oAQ4bj4WhXdLxPg8eCyL?p=preview

<div id="canvas" tabindex="0">
    <script>
        var draw = SVG('canvas').size('100%', '100%');
        var clientX, clientY, offsetX, offsetY;
        var x, y;
        var shapeId = "";

        function getId(id)
        {
            shapeId = id;
            console.log(shapeId);
        }
        function createShape(event)
        {
            var $stageContainer = $("#canvas");
            var stageOffset = $stageContainer.offset();
            clientX = event.clientX;
            clientY = event.clientY;
            offsetX = stageOffset.left;
            offsetY = stageOffset.top;
            x = clientX - offsetX;
            y = clientY - offsetY;
            console.log("x is: " + x + " " + "y is: " + y);

            switch (shapeId)
            {
                case('newConnector'):
                    createLine(x, y);
                    break;
                default:
                    console.log("Nothing to drag");
            }
        }
        function createLine(x, y)
        {
            var links = draw.group();
            var markers = draw.group();
            var nodes = draw.group();

            var g1 = nodes.group().translate(20, 80).draggy();
            g1.circle(10).fill("#FF5252").opacity(0.4);

            var g2 = nodes.group().translate(100, 80).draggy();
            g2.circle(10).fill("#C2185B").opacity(0.8);

            var conn1 = g1.connectable({
                container: links,
                markers: markers,
                marker: 'default',
                targetAttach: 'perifery',
                color: 'black'
            }, g2);
        }
    </script>
</div>

使用旧版本的 svgjs 修复了它:http://cdnjs.cloudflare.com/ajax/libs/svg.js/1.0.1/svg.min.js

所以新版本显然有问题。