我试图弄清楚如何将饼图部分从 0 设置为 100 的动画。我什至无法绘制超过 180 度的圆弧。如果我尝试从 1 度角动画到 90 度角，而不是有一个很好的过渡，我得到了一个形状变形。
我正在尝试使用如下路径绘制饼图的某些部分：
M 100 100 l 0 -50 a 50 50 0 0 0 -20 10 z
我的第一个挑战是计算最后两个数字，即圆弧的终点，第二个挑战是编写一个从 1 度角到 360 度角的动画。
任何帮助将不胜感激！
【问题讨论】：
标签： javascript animation svg
值得在SO 上阅读此答案，其中包含有关 dasharray 效果的信息，这可能很有用。这并不能直接回答馅饼的问题，但可能会给出一些想法。很大程度上取决于您希望动画的具体方式，以及这些是否适合您。
因此，您可以使用类似 "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" 的字符串绘制一个完整的圆2 条弧线。
你也可以只用一个圆圈来做。因此，这里有一些内容，以及旁边的 Snap 示例，因为您将使用它，并且比较有用...
<svg width="600" height="425">
<path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" fill="none" stroke="black" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000">
<animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/>
</path>
<circle cx="150" cy="350" r="80" fill="none" stroke="red" stroke-width="161" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000" >
<animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze">
</animate>
</circle>
</svg>
最后一点与 Snap.js 相同
var s = Snap(600,600);
var c = s.circle(150, 150, 80).attr({
fill: "none",
stroke: 'red',
strokeWidth: 161,
strokeDasharray: "0 600 600 0",
strokeDashoffset: 1000
});
Snap.animate(0,600, function( value ){
c.attr({ 'strokeDashoffset': value })
},5000 );
这是一个jsfiddle，他们都在
【讨论】：