如何在SVG中顺时针为饼图onLoad设置动画 [英] How do I clockwise animate Pie Chart onLoad in SVG
问题描述
我陷入了饼状图的困境,该饼状图应按顺时针onLoad进行动画处理.这是我的饼图小提琴
I am stuck with pie chart which should animate clockwise onLoad. Here, is my pie chart fiddle
例如,我需要此动画来处理更轻松的曲线路径,
I need this animation to work with brezier curve paths, for instance,
<path d="M 276 63.03 C 329.93 63.03 381.86 78.24 421.4 105.63 L 276 222.79 M 276 63.03" />
我也知道,可以使用snap.svg库实现此功能,但在这种情况下无法进行锻炼.
I am also aware that, it can be achieved using snap.svg library but is unable workout in this case.
感谢您的帮助.
提前谢谢!
推荐答案
您可以使用嵌套的animate
并以渐进的延迟更改某些属性.
You can use a nested animate
and change some attribute with a progressive delay.
在此示例中,我将笔划g
放置在每个切片的填充g
内,并在其中添加了animate
元素,每个动画均以0.5s开始.我为opacity
属性设置了动画(因此我为每个元素添加了opacity="0"
属性;您可以将其替换为另一个属性).这是第二个片段:
In this example I placed the stroke g
inside the fill g
for each slice, and added an animate
element inside, each animation starting 0.5s. I animated the opacity
attribute (so I added an opacity="0"
attribute for each element; you can replace it for another attribute). This is the second slice:
<g id="pieFillSection2" opacity="0" style="fill: yellow;fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" >
<animate attributeName="opacity" from="0" to="1"
begin="0.5s" dur="1s" fill="freeze"/>
<path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" />
<g class="pieStroke" id="pieStrokeSection2" style="stroke-width: 1.0;stroke: rgb(128,128,128);stroke-opacity: 1.0; fill: none" transform="matrix(1,0,0,1,0,0)" >
<path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" />
</g>
</g>
检查更新的 JSFiddle .
这篇关于如何在SVG中顺时针为饼图onLoad设置动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!