アニメーション後のSVG属性を最終値に保ちます

Question

SVGがロードされたときに円をアニメーション化しようとしています。それが必要：

1. が最初に設定時にロード、小さいサイズ（1の半径）
2. 秒の設定量セットサイズへ
3. 増加サイズ（17の半径）
4. 滞在した後に開始しますこの半径で永遠にここ

は私がやっているものです：

<svg width="36px" height="36px"> 
    <circle r="1" cy="18" cx="18"> 
     <animate attributeName="r" from="1" to="17" dur="1s" begin="1s"></animate> 
    </circle> 
</svg> 

しかし、あなたは結果を見て（と別のオプション、リンクに含まれる）場合は、それはそれらのいずれかで動作していない見ることができます。

http://codepen.io/sheepysheep60/pen/Hjfdo

は誰でもプレイする方法上の任意の光を当てることができます

アニメーションが最後まで終わったら、アニメーションを一時停止するか、設定が欠落していますか？

Answer 1

使用fill="freeze"：

<svg width="36px" height="36px"> 
    <circle r="1" cy="18" cx="18"> 
     <animate attributeName="r" from="1" to="17" dur="1s" begin="1s" fill="freeze"></animate> 
    </circle> 
</svg> 

は、より多くの情報のためhereを参照してください。