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

Solution 1:

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

Solution 2:

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