动画使用JavaScript库SVG组对象 [英] Animating SVG group object using the JavaScript library

问题描述

我创建了一个SVG组对象和附加矩形和包含HTML文本foreignObject-SVG元素。我定义这就是所谓上该组的鼠标按下事件的动画功能。动画功能，使由id指定的元素上的过渡。

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()

我可以看到该组改变的x坐标，但该组内的元件不动。如果我设置#ID到foreignObject的ID或矩形，他们将移动。所以，我想我要呼吁集团的每一个子元素的转变，我不知道该怎么办了。

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.

下面是一个例子，我prepared： http://jsfiddle.net/YxfMH/

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

我也想知道我怎么可以拖动整组与周围的鼠标。

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

推荐答案

＆LT; G＆GT; 元素没有x或y属性。您可以设置这样的事情，就像你可以设置所谓的'富'的属性，但它不会有任何效果。如果要移动一组，那么你需要设置一个翻译就可以了例如变换变换=翻译（10，10）

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);

和

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

您需要改变以获得这...

这篇关于动画使用JavaScript库SVG组对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！