Question

是否有相当于jQuery的SVG元素的slideDown方法？现在元素只是突然出现。我想通过向下滑动来软化一点。

编辑：我的代码基于动态堆积条形图：http://benjchristensen.com/2011/12/16/dynamic-stacked-bar-chart-using-d3-js/

我有许多带有一个条形图的图表，而不是一个有很多条形图的图形。我想这样做，以便当图表出现时，它会慢慢滑下来。

Answer 1

我不相信jQuery很容易支持SVG。 Keith Wood有一个SVG specific jQuery library，可以让你做一些动画。

另一种选择是使用与SVG一起使用的图形库。首先想到的是D3.js，它提供了一些非常容易使用的方法来操作SVG元素。此外，选择器样式类似于您可能习惯的jQuery。

如果你正在使用D3，我会查看transition方法。你可以做很多事，D3非常强大。一个例子是：

var rect = d3.select('#rectangle');
// this selects a rectangle.  Let's say that it starts at 
// the origin, or even off screen in your case   

rect.transition()
    .duration(250)
    .attr('x', 10)
    .attr('y', 20); 
    // this changes the x and y attributes
    // of the rectangle to 10 and 20 respectively
    // using a transition over a 250ms duration.

对于您提供的特定示例，我只需更改y属性，使其从屏幕开始（例如y = -1 * height），然后将其转换为y = height或{{ 1}}或类似的东西。

轻松下滑SVG元素的方法？

1 个答案: