错误：<svg> 属性 width="-Infinity" jsPlumb 的值无效

Question

我有一个函数可以在两个divs 之间创建一条以模式显示的线。

//A function that creates line instance.
function myid_create_line_instance(){ 

    jsPlumb_instance[0] = jsPlumb.getInstance();              
    var id1 = 'tpl_preview_line_1_pair_1';
    var id2 = 'tpl_preview_line_1_pair_2';  


    var endpointOptions = { 
        anchor:'BottomCenter',
        maxConnections:1,                      
        endpoint:['Rectangle',{width:'1px', height:'1px' }], 
        paintStyle:{fillStyle:'#00000', dashstyle:'3 3'},
        connectorStyle:{lineWidth:'1px',strokeStyle:'#000000'},
        connector:['Straight'],                                          
    };

    div1Endpoint = jsPlumb_instance[0].addEndpoint(id1, endpointOptions);
    div2Endpoint = jsPlumb_instance[0].addEndpoint(id2, endpointOptions);       

    jsPlumb_instance[0].connect({   
        source:div1Endpoint,
        target:div2Endpoint,
    }); 
    jsPlumb_instance[0].draggable(id1);
    jsPlumb_instance[0].draggable(id2);
}

执行代码后，抛出2个错误：

Error: Invalid value for <svg> attribute width="-Infinity" jsPlumb- 
2.1.2.js?o9evom:12902
_attr jsPlumb-2.1.2.js?o9evom:12902
paint jsPlumb-2.1.2.js?o9evom:13086
_ju.extend.paint jsPlumb-2.1.2.js?o9evom:8626
(anonymous function) jsPlumb-2.1.2.js?o9evom:2692
redraw jsPlumb-2.1.2.js?o9evom:9322
_draw jsPlumb-2.1.2.js?o9evom:3649
_currentInstance.finaliseConnection jsPlumb-2.1.2.js?o9evom:3926
connect jsPlumb-2.1.2.js?o9evom:4253
myid_create_line_instance myid_templates.js?o9evom:4614
myid_template_display_line myid_templates.js?o9evom:2215
jQuery.fn.myid_choose_template myid_templates.js?o9evom:4812
Drupal.ajax.commands.invoke ajax.js?v=7.34:608
Drupal.ajax.success ajax.js?v=7.34:400
ajax.options.success ajax.js?v=7.34:164
c jquery-1.10.2.js:3048
p.fireWith jquery-1.10.2.js:3160
k jquery-1.10.2.js:8235
r jquery-1.10.2.js:8778

第二个错误：

Error: Invalid value for <svg> attribute height="-Infinity" jsPlumb-2.1.2.js?o9evom:12902
_attr jsPlumb-2.1.2.js?o9evom:12902
paint jsPlumb-2.1.2.js?o9evom:13086
_ju.extend.paint jsPlumb-2.1.2.js?o9evom:8626
(anonymous function) jsPlumb-2.1.2.js?o9evom:2692
redraw jsPlumb-2.1.2.js?o9evom:9322
_draw jsPlumb-2.1.2.js?o9evom:3649
_currentInstance.finaliseConnection jsPlumb-2.1.2.js?o9evom:3926
connect jsPlumb-2.1.2.js?o9evom:4253
myid_create_line_instance myid_templates.js?o9evom:4614
myid_template_display_line myid_templates.js?o9evom:2215
jQuery.fn.myid_choose_template myid_templates.js?o9evom:4812
Drupal.ajax.commands.invoke ajax.js?v=7.34:608
Drupal.ajax.success ajax.js?v=7.34:400
ajax.options.success ajax.js?v=7.34:164
c jquery-1.10.2.js:3048
p.fireWith jquery-1.10.2.js:3160
k jquery-1.10.2.js:8235
r jquery-1.10.2.js:8778

我在jsPlumb初始化之后尝试了下面的第一行代码；然后是连接两个div后下面的第二行代码，没有运气。

 jsPlumb_instance[0].setSuspendDrawing(true);
 jsPlumb_instance[0].setSuspendDrawing(false, true);

我什至尝试了批处理方法，但没有任何变化。

jsPlumb_instance[0].batch(function() {
//Codes about connecting the two points of line.
}, false);

我注意到的一件事是在我的模态中应该连接两个点的线不在模态中。见下图：

我也尝试了下面的代码，但问题仍然存在。

jsPlumb_instance[id].repaintEverything();

Answer 1

当我的容器没有任何大小时，我遇到了同样的错误。我可以假设您应该为 jsPlumb 实例明确指定容器：

jsPlumb.getInstance({ Container:"editor" });