我创建了一个 SVG 组对象并附加了包含 HTML 文本的矩形和 foreignObject-SVG 元素。我定义了一个动画函数,该函数在组的“mousedown”事件上调用。动画函数对由 id 指定的元素进行转换。
哪个部分不起作用。如果我使用:
d3.select("#group").transition()
我可以看到组的 x 坐标在变化,但组内的元素没有移动。如果我将#Id 设置为 foreignObject 的 Id 或它们将移动的矩形。所以我假设我必须在“组的每个子元素”上调用转换,但我不知道该怎么做。
这是我准备的一个例子:http://jsfiddle.net/YxfMH/
我也想知道如何用鼠标拖动“整个组”。
最佳答案
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... 的位
关于javascript - 使用 JavaScript 库动画 SVG 组对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15933822/