CODEWITHSUNDEEP
javascriptjquerysvgsnap.svg
Slyper
Slyper

Reputation: 906

Dynamically add SVG circle in a SVG group?

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 ... 

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="snap.svg-min.js"></script>
  </head>

  <body>
    <svg id="svg"></svg>
    <div id="addComp">Add Composite</div>

    <script>
// 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 <= 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 < 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
</script>
  </body>
</html>

Visit this site and click on 'Add composite' link a couple of times to see it in action

Any help is very appreciated ....

Thanks

Upvotes: 0

Views: 2875

Answers (2)

Rafi Ali Khan
Rafi Ali Khan

Reputation: 56

Basically adding the array on the .group(CirArray) does not seem to add all the array items into a group (Inspect the SVG output) the group tag is empty.

Instead adding them in the for-loop below. Made the following changes and it seems to work as expected and moving all squares and circles together.

  var tableset = s.group();

  for (p = 0; p < CirArray.length; p++) {
        tableset.add(CirArray[p]);
        console.log(CirArray[p])
    }

In the drag function also calling it simply drag(cirArray) (as suggested by @Paul-lebeau ie. drag(CirArray);).

Forked Plunker

Upvotes: 2

Paul LeBeau
Paul LeBeau

Reputation: 101820

The second argument to the function.apply() method is supposed to be an array of parameters.

But you are passing in an array of Snap elements. So in your drag() function, the CirArray parameter is getting set to the first element of your original CirArray, not the whole array.

Either change the call to

drag.apply(null, [CirArray]);

or just call it normally

drag(CirArray);

Upvotes: 0

Related Questions