CODEWITHSUNDEEP
javascriptanimationd3.jssvg
karlitos
karlitos

Reputation: 1656

Animating SVG group object using the JavaScript library

I created a SVG group-object and appended rectangle and foreignObject-SVG element containing HTML text. I defined an animation function which is called on the 'mousedown' event on the group. The animation function makes a transition on the element specified by an id.

Which is the part that does not work. If I use :

d3.select("#group").transition()

I can see the x-coordinates of the group changing but the elements inside the group do not move. If I set the #Id to the Id of the foreignObject or the rectangle they will move. So I assume I have to call the transition on "every subelement of the group" and I do not know how to do it.

Here is an example I prepared : http://jsfiddle.net/YxfMH/

I also wonder how can I drag the "whole group" around with the mouse.

Upvotes: 1

Views: 3003

Answers (2)

Rik Del Mar
Rik Del Mar

Reputation: 229

you can access direct to the matrix of a svg element to change the position or rotation

look this example "U.F.O animation"

http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/examples_EN.php?exampleName=ufo_animation_EN

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123995

SVG <g> elements don't have x or y attributes. You can set such things just like you could set an attribute called 'foo' but it won't have any effect. If you want to move a group then you need to set a translate transform on it e.g. transform="translate(10, 10)"

// Add a group to the canvas
var group = svg.append("svg:g")
    .attr("id", "group")
    .attr("transform", "translate(10, 10)")
    .on("mousedown", animate);

and

function animate() {
    d3.select("#group").transition()
    .duration(1000)
    .attr("transform", "translate(100, 100)")
};

are the bits you need to change to get this...

Upvotes: 4

Related Questions