javascript - 在纯 SMIL 中将 SVG 饼图从 0% 动画到 100%

Question

如何在纯 SMIL 中重新创建这个 SVG 饼图动画？我希望放弃复杂的 JS，并且能够控制动画的总持续时间:

http://jsfiddle.net/frank_o/gFnw9/19/

到目前为止，这就是我所得到的:

http://jsfiddle.net/frank_o/46mH2/ (感谢Ian)

但不幸的是:

• 它的位置远离 Canvas (或者一开始就不是一个完整的圆圈)
• 从 9 点开始，而不是 12 点
• 使用 Snap.svg(宁愿不依赖于任何外部库，但如果必须的话会这样做)

HTML:

<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="1s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

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 );

更新:

问题:

应该是:

Answer 1

您可以像这样在路径上应用转换:

<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" transform="translate(75,75) rotate(90,100,100) ">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

http://jsfiddle.net/46mH2/1/

旋转变换将使其从 12 点钟位置开始，平移将使其偏移笔画宽度的一半，使其位于 View 框内。
确保以正确的顺序应用转换，否则您将不会得到相同的结果。

更新
是的，您可以避免这两种转换:

<svg width="600" height="425">
    <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 0,150 a 75,75 0 1,0 0,-150" 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>
</svg>

http://jsfiddle.net/46mH2/3/

在 svg 上设置一个 viewBox，以便您可以缩放元素并仍然使整个图像可见:

<svg width="600" height="425" viewBox="0 0 600 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" transform="translate(75,75) rotate(90,100,100) ">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

如果您没有按比例缩放，请检查是否使用了preserveAspectRatio，看看哪一个适合您