使用JavaScript库动画SVG组对象

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

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

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

我可以看到组的x坐标改变，但组内的元素不移动。如果我将#Id设置为foreignObject的Id或它们将移动的矩形。所以我假设我必须要对“组的每个子元素”进行过渡，我不知道该怎么做。

下面是一个例子，我准备：http://jsfiddle.net/YxfMH/

我也想知道我怎么可以拖动“整组”与周围的鼠标。

来源

2013-04-10 karlitos

SVG <g>元素没有x或y属性。你可以设置这样的东西，就像你可以设置一个名为'foo'的属性，但它不会有任何效果。如果你想移动一个组，那么你需要在其上设置一个转换转换，例如变换= “翻译（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...

来源

2013-04-10 19:03:36

非常感谢您的解释。但是，如果将值定义为字符串，我如何使用变量来设置translate（）参数？我怎样才能得到团队的实际位置？ – karlitos 2013-04-10 20:26:27

将x和y组件保留在变量中，然后构造适当的字符串。 – 2013-04-10 20:36:00

为了方便构建字符串，我经常有一个简单的函数，比如'var translate = function（x，y）{return“translate（”+ x +“，”+ y +“）”}'所以我可以只需调用'translate（x，100）;'..保存键入所有这些引号和加号！ – minikomi 2013-04-11 01:48:38

位，您可以访问直接到SVG元素的矩阵改变位置或旋转

看这个例子“U.F.O animation”

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

来源

2013-05-07 16:25:12

使用JavaScript库动画SVG组对象

回答

相关问题