我坚持饼图应顺时针动画的onLoad。 这里,是我的饼图小提琴
我需要这个动画与brezier曲线路径的工作,例如,
<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库来实现,但是在这种情况下无法锻炼。
任何帮助表示赞赏。
提前致谢!
我坚持饼图应顺时针动画的onLoad。 这里,是我的饼图小提琴
我需要这个动画与brezier曲线路径的工作,例如,
<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库来实现,但是在这种情况下无法锻炼。
任何帮助表示赞赏。
提前致谢!
您可以使用嵌套的animate
,并改变一些属性与逐行扫描的延迟。
在这个例子中我放置在行程g
填充内部g
针对每个切片,并增加了一个animate
内部元件,每个动画开始0.5秒。 我动画的opacity
属性(所以我加一个opacity="0"
对每个元素的属性;可以取代它用于其他属性)。 这是第二片:
<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 。