2

我有一个饼图 svg 图像，它是从服务器获取的。我的工作是使用snap svg将动画应用于客户端的这个饼图。

现在，问题是我是 SVG 新手，我不知道从哪里开始，但我已经成功地为其他图表类型设置动画。

谁能帮我提供一些推荐链接来解决这个问题。我得到了这个link实现了这个。但他们没有解释他们是如何做到这一点的。

可以通过 snap svg for pie chart 实现的任何其他类型的动画也可以帮助我。

编辑我添加了要制作动画的饼图。我试过这段代码：

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

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

此行不会在小提琴中执行，因为它需要 Snap.js

任何帮助表示赞赏。

提前致谢。

4

1 回答 1

1

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

我不能把它放在一个 jsfiddle 上，因为它需要一个远程文件，但是用下面的代码把它放在一个测试页面上。此外，Snap 网站入门页面显示 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=relative transform, T=absolute transform, s=relative scale, S=absolute Scale r=relative rotate, R=relative rotate稍后合并

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

我假设您需要将悬停元素附加到饼图的每个部分（您可以使用 g.select("segment1") 之类的东西），并像上面一样放大/缩小它。

于 2014-03-05T13:21:25.013 回答