Question

我试图弄清楚如何将饼图部件从0设置为100.我甚至无法绘制超过180度的弧。如果我尝试从1度角到90度角的动画，而不是有一个很好的过渡，我会得到一个形状变形。

我正试图用这样的路径绘制饼图的一部分：

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

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

非常感谢任何帮助！

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，其中包含所有内容

如何在svg中将饼图部件的动画设置为0到100％？

1 个答案: