2013-10-11 18 views
6

Bir SVG yüklendiğinde bir daireyi canlandırmaya çalışıyorum. Bu anlaşma:Animasyondan sonra SVG özniteliğini son değerde tut

  1. Başlangıçta bir takım olarak yüklenecek, küçük boyutlu (1 yarıçapı)
  2. saniyelik seti miktarına seti boyutuna
  3. Artış boyutu (17 yarıçapı)
  4. Stay sonra başlayın Bu yarıçap sonsuza İşte

ne yapıyorum geçerli:

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

Ama sonuç bakmak (ve başka bir seçenek, bağlantı dahil) eğer o ikisiyle de çalışmıyor görebilirsiniz:

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

herkes oynamak için nasıl aydınlatabilir

sonuna kadar animasyon, sonra animasyon duraklatmak, ya da eksik bir ayar var mı?

cevap

10

Kullanım 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> 

fazla bilgi için here bakınız.