javascript - 純粋な SMIL で SVG 円グラフを 0% から 100% にアニメーション化する

Question

純粋な SMIL でこの SVG 円グラフ アニメーションをどのように再現しますか? 複雑な JS を捨てて、アニメーションの合計時間を制御できるようにしたいと考えています。

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

これまでのところ、これは私が得たすべてです：

http://jsfiddle.net/frank_o/46mH2/ (イアンに感謝)

しかし残念ながら：

• キャンバスから離れた場所に配置されています（または、最初から完全な円ではありませんでした）
• 12時ではなく9時スタート
• 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 );

アップデート：

問題：

次のようにする必要があります。