我有一个饼图 svg 图像，它是从服务器获取的。我的工作是使用snap svg 在客户端将动画应用于此饼图。
现在，问题是我是 SVG 新手，不知道从哪里开始，但我已经成功地为其他图表类型制作动画。
谁能帮我提供一些推荐链接来解决这个问题。我得到了实现此功能的 link。但他们没有解释他们是如何做到这一点的。
可以通过 snap svg 实现饼图的任何其他类型的动画也可以帮助我。
编辑我添加了fiddle 的饼图，我想制作动画。我试过这段代码：
Snap("svg").select("#pie2d").
animate({ transform: 'r360,150,150' }, 1000, mina.linear );
它不会对饼图的每个部分进行动画处理，而是将整个图表作为一个整体。
此行不会在小提琴中执行，因为它需要 Snap.js
感谢任何帮助。
提前致谢。
【问题讨论】：
标签： svg charts pie-chart svg-animate snap.svg
快照动画通常很简单。这是一个相对简单的示例，它将介绍您可能需要的一些元素..在文件中加载，并在加载后通过悬停对其进行动画处理（您必须等到加载完成并导入文件）。
我不能把它放在一个 jsfiddle 上，因为它需要一个远程文件，但是用下面的代码把它放在一个测试页 here 上。此外，Snap 网站 getting started 页面显示加载 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") 之类的东西），并像上面一样放大/缩小它。
【讨论】：