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

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

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

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

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

下面是我准备的一个例子：

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

SVG元素没有x或y属性。您可以像设置名为“foo”的属性一样设置这些内容，但它不会产生任何效果。如果要移动组，则需要对其设置平移变换，例如transform=“translate（10，10）”

及

SVG元素没有x或y属性时，需要更改位以获取。您可以像设置名为“foo”的属性一样设置这些内容，但它不会产生任何效果。如果要移动组，则需要对其设置平移变换，例如transform=“translate（10，10）”

及

---

是否需要更改位以获得

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

看看这个例子“

---

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

看看这个例子“

---

非常感谢您的解释。但是，如果值定义为字符串，如何使用变量设置translate（）参数？如何得到组的实际位置？将x和y分量保存在变量中，然后构造适当的字符串。为了更容易地构建字符串，我通常有一个简单的函数，如

var translate=function（x，y）{return“translate”（+x+），“+y+”）}

这样我就可以调用

translate（x，100）。。省去了一直键入的所有引号和加号！哦这是个好主意！我认为这将使实现“拖动”更容易，我打算试试这个。但是无论如何，我怎样才能得到平移值（坐标）？我被迫做一些字符串拆分/解析，还是有一个好方法？非常感谢您的解释。但是，如果值定义为字符串，如何使用变量设置translate（）参数？如何得到组的实际位置？将x和y分量保存在变量中，然后构造适当的字符串。为了更容易地构建字符串，我通常有一个简单的函数，如
var translate=function（x，y）{return“translate”（+x+），“+y+”）}
这样我就可以调用
translate（x，100）。。省去了一直键入的所有引号和加号！哦这是个好主意！我认为这将使实现“拖动”更容易，我打算试试这个。但是无论如何，我怎样才能得到平移值（坐标）？我被迫做一些字符串拆分/解析，还是有一个好方法？
// 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)")
};