title: Error: Invalid value for <svg> attribute width="-Infinity" jsPlumb
body: <p>I have a function that creates a line displayed in a modal, between the two <code>divs</code>. </p>
  
  <pre><code>//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);
  }
  </code></pre>
  
  <p>After executing the code, it throws 2 error:</p>
  
  <pre><code>Error: Invalid value for &lt;svg&gt; 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
  </code></pre>
  
  <p>Second error:</p>
  
  <pre><code>Error: Invalid value for &lt;svg&gt; 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
  </code></pre>
  
  <p>I tried the first line of code below right after jsPlumb initialization; and then the second line of code below after connecting the two divs, with no luck.</p>
  
  <pre><code> jsPlumb_instance[0].setSuspendDrawing(true);
   jsPlumb_instance[0].setSuspendDrawing(false, true);
  </code></pre>
  
  <p>I even tried the batch method, but nothing's change.</p>
  
  <pre><code>jsPlumb_instance[0].batch(function() {
  //Codes about connecting the two points of line.
  }, false);
  </code></pre>
  
  <p>One thing I noticed is the line that supposed to be connecting the two points in my modal was found not in the modal. See image below:</p>
  
  <p><a href="https://i.stack.imgur.com/WDSqi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WDSqi.png" alt="enter image description here"></a> </p>
  
  <p>I also tried the code below, but the problem still occur.</p>
  
  <pre><code>jsPlumb_instance[id].repaintEverything();
  </code></pre>