如何在 SVG 中顺时针动画饼图 onLoad答案

【问题标题】：How do I clockwise animate Pie Chart onLoad in SVG如何在 SVG 中顺时针动画饼图 onLoad
【发布时间】：2014-05-16 19:46:14
【问题描述】：

我被饼图困住了，它应该在加载时顺时针动画。这是我的pie chart fiddle

例如，我需要这个动画来处理 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 库来实现，但在这种情况下无法锻炼。

感谢任何帮助。

提前致谢！

【问题讨论】：

标签： svg pie-chart snap.svg svg-animate

【解决方案1】：

您可以使用嵌套的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。

【讨论】：

感谢您的回复。我以前试过这个。但需要类似于this 的动画。等待回复！