Question

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

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

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

任何其他类型的动画都可以通过快照svg实现饼图也可以帮助我。

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

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

它不会为饼图的每个部分设置动画，而是整体绘制整个图表。

由于需要Snap.js

，因此不会在小提琴中执行此行

感谢任何帮助。

提前致谢。

Answer 1

Snap动画通常很简单。这是一个相对简单的示例，它将介绍您可能需要的一些元素。在文件中加载，并在加载悬停时为其设置动画（您必须等到文件导入加载完成后）。

我无法将它放在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 ) };

对于变换，他们使用拉斐尔格式（同一作者），这是松散的以下......

t =相对变换，T =绝对变换，s =相对尺度，S =绝对尺度 r =相对旋转，R =相对旋转 [R 精心意味着它考虑了以前的变换来积累在我们结合之后，它没有太大的区别

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

我假设你需要将一个悬停元素附加到饼图的每个片段（你可以使用像g.select（“segment1”）这样的东西），并像上面那样向上/向外缩放。

SVG饼图动画

1 个答案: