Question

我创建了一个SVG group-object和附加的矩形以及包含HTML文本的foreignObject-SVG元素。我定义了一个动画函数，该函数在组上的'mousedown'事件中调用。动画函数在id指定的元素上进行转换。

哪个部分不起作用。如果我使用：

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

我可以看到组的x坐标在变化，但组内的元素不会移动。如果我将#Id设置为foreignObject的Id或它们将移动的矩形。所以我假设我必须在“团队的每个子元素”上调用过渡，我不知道该怎么做。

以下是我准备的示例：http://jsfiddle.net/YxfMH/

我也想知道如何用鼠标拖动“整个组”。

Answer 1

SVG <g>元素没有x或y属性。你可以设置这样的东西，就像你可以设置一个名为'foo'的属性，但它不会有任何影响。如果要移动组，则需要在其上设置转换变换，例如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)")
};

是您需要更改以获取this...

的位

Answer 2

您可以直接访问svg元素的矩阵来更改位置或旋转

查看此示例“U.F.O animation”

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

使用JavaScript库为SVG组对象设置动画

2 个答案: