javascript - 如何在 svg 中将饼图部分从 0% 动画到 100%？

Question

我正在尝试弄清楚如何将饼图部分从 0 动画到 100。我什至无法绘制超过 180 度的弧线。如果我尝试从 1 度 Angular 制作动画到 90 度 Angular ，我得到的不是一个很好的过渡，而是一个形状变形。

我正在尝试使用如下路径绘制饼图的一部分:

M 100 100 l 0 -50 a 50 50 0 0 0 -20 10 z

我的第一个挑战是计算最后两个数字，即弧线的终点，第二个挑战是编写一个从 1 度 Angular 到 360 度 Angular 的动画。

任何帮助将不胜感激!

Answer 1

值得阅读 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全部开启