title: Dynamically add SVG circle in a SVG group?
body: <p>I am using SnapSVG library. I am trying to add a dynamically created SVG circle into a SVG group. A new circle is added every time I click a link (Add Composite). Then I try to push that newly created circle to an array and pass the array to the group (drag) function. I basically want to drag all the circles and rectangle as a group. But its not working. Here is my code ... </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="snap.svg-min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;svg id="svg"&gt;&lt;/svg&gt;
      &lt;div id="addComp"&gt;Add Composite&lt;/div&gt;
  
      &lt;script&gt;
  // JavaScript Document
  (function() {
      var s = Snap("#svg");
  
      // Construct Composite
      function composite(y, i) {
          var CirArray = [];
          $("svg g").remove();
          $("svg rect").remove();
          $("svg circle").remove();
          var square = s.rect(30, 40, y, 40);
          console.log("Square:" + y);
          square.attr({
              fill: 'lightblue',
              stroke: 'lightblue',
              //strokeOpacity: .3,
              //strokeWidth: 10
          });
          CirArray.push(square);
  
  
          var k = 0;
          for (z = 1; z &lt;= i; z++) {
              k = k + 45;
              console.log("Circle:" + k);
  
              var mycircle = s.circle(k, 120, 20);
              mycircle.attr({
                  fill: 'coral',
                  stroke: 'coral',
                  strokeOpacity: .3,
                  strokeWidth: 10
              });
  
              CirArray.push(mycircle);
  
          } // For loop end
          drag.apply(null, CirArray);
  
      } // Construct Composite End
  
      // Group
      function drag(CirArray) {
          var tableset = s.group(CirArray);
          for (p = 0; p &lt; CirArray.length; p++) {
              console.log(CirArray[p])
          }
          console.log(CirArray.length)
              // Drag
          var move = function(dx, dy) {
              this.attr({
                  transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
              });
          }
          var start = function() {
              this.data('origTransform', this.transform().local);
          }
          var stop = function() {
              console.log('finished dragging');
          }
          tableset.drag(move, start, stop);
      } //Drag End
  
      // Add Composite
      var x = 0;
      var clct = 0;
      $("#addComp").click(function() {
          x = x + 45;
          clct = clct + 1;
          composite(x, clct);
      }); // Add Composite End
  }()); // Iffe End
  &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/8zan0L6buhffJOluDZET?p=preview" rel="nofollow noreferrer">Visit this site and click on 'Add composite' link a couple of times to see it in action</a></p>
  
  <p>Any help is very appreciated ....</p>
  
  <p>Thanks</p>