1

我创建了一个 SVG 组对象并附加了包含 HTML 文本的矩形和 foreignObject-SVG 元素。我定义了一个动画函数，该函数在组的“mousedown”事件上调用。动画函数在由 id 指定的元素上进行转换。

这是不起作用的部分。如果我使用：

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

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

这是我准备的一个例子：http: //jsfiddle.net/YxfMH/

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

4

2 回答 2

4

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

是你需要改变的位来得到这个......

于 2013-04-10T19:03:36.643 回答
0

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

看这个例子“不明飞行物动画”

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

于 2013-05-07T16:25:12.210 回答