SVG饼图动画

我有一个饼图svg图像，我从服务器上得到它。我的工作是在客户端使用动画来应用这个饼图

现在，问题是我对SVG还不熟悉，我不知道从哪里开始，但我已经成功地制作了其他图表类型的动画

任何人都可以帮我一些推荐链接来解决这个问题。我得到了这个，它实现了这个。但他们没有解释他们是如何做到这一点的

任何其他类型的动画，可以通过捕捉svg的饼图来实现，也可以帮助我

---

编辑我添加了一个我想制作动画的饼图。我尝试过以下代码：

Snap("svg").select("#pie2d").
            animate({ transform: 'r360,150,150' }, 1000, mina.linear );

它不会为饼图的每个部分设置动画，而是将整个图表作为一个整体

由于需要Snap.js，这一行不会在fiddle中执行

感谢您的帮助

---

提前感谢。

快照动画通常很简单。下面是一个相对简单的示例，它将介绍您可能需要的一些元素。加载到文件中，并在使用hover加载后对其进行动画处理（您必须等待加载完成文件导入）

我不能将它放在JSFIDLE上，因为它需要一个远程文件，但可以将它放在一个测试页面上，代码如下。快照网站页面还显示svg中的加载和动画

var s = Snap(600,600); 
var g = s.group();
var tux = Snap.load("Dreaming_tux.svg", function ( loadedFragment ) { 
                    g.append( loadedFragment ); 
                    g.hover( hoverover, hoverout );
                } );  

var hoverover = function() { g.animate({ transform: 's2r45,150,150' }, 1000, mina.bounce ) };
var hoverout = function() { g.animate({ transform: 's1r0,150,150' }, 1000, mina.bounce ) };

对于转换，它们使用Raphael格式（同一作者），大致如下所示

t=相对变换，t=绝对变换，s=相对比例，s=绝对比例 r=相对旋转，r=相对旋转 R elative意味着它会考虑以前的转换以进行累积 在这里，它没有太大的区别，直到我们以后合并

对于特定的饼图，这取决于您在svg中是否已经有了从服务器提取的饼图，因此您可能不需要对饼图的创建了解太多。如果你这样做了，还有一些其他的库已经支持饼图了（Raphael，d3.js等）

---

我假设您需要将一个悬停元素附加到饼图的每个部分（您可以使用类似g.select（“segment1”）的东西），并将其放大/缩小，如上所述

请检查我的编辑。我已经为我正在使用的饼图添加了小提琴，还尝试了您建议的工作。但无法实现中所示的动画。Plz帮助！！！这里有一些东西可以让你去做，你可能会发现你想把svg部分填充和笔划放在每个部分的一个组中，这样你就可以在需要的时候只制作一个组的动画了。这真的很酷。。谢谢你早日回复。但我必须实现动画所做的。换句话说，一旦饼图加载，它就应该顺时针或逆时针设置动画。再次感谢你的帮助。