javascript - 使用 JavaScript 库动画 SVG 组对象

Question

我创建了一个 SVG 组对象并附加了包含 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="翻译(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... 的位