Sadece bir sınıf ekleyerek SVG animasyonu

Question

SMIL animasyonunu kullanarak bir svg yükleyici animasyonu oluşturdum. Svg'yi sadece bir sınıf adı ekleyerek loader numaralı öğenin içinde gösteriyorum.

Fiddle

.loader{ 
    position: relative; 
} 

/* image */ 
.loader::before { 
    background-image: url('loader.svg'); 
    /* other properties */ 
} 

/* blocker */ 
.loader::after { 
    /* other properties */ 
} 

(kabın üzerinde tıklama yükleyici görmek için) Ama şimdi, ben SMIL is deprecated in chrome fark etti. Böylece, CSS kullanarak animasyonları işlemeye karar verdim. Ama eğer css kullanarak animasyonları halledersem, o zaman kodu yukarıda yaptığım gibi yönetemeyeceğim, sadece bir ders ekleyerek.

CSS animasyonları kullanıyorum, kabın içine yeni bir eleman eklemem ve sonra inline-svg konseptini IMO kullanmalıyım.

Yine de var mı, css animasyonlarını kullanırken sadece bir sınıf ekleyerek animasyonu yönetebilir miyim?

bazı noktalar:

• Ben herhangi bir yeni unsurlar eklemek istemiyorum.
• Sadece bir sınıf eklemek ve başka hiçbir şey için JavaScript kullanacağım.
• Bir gif oluşturmak istemiyorum (raster görüntü).

Ben SMIL ve CSS animasyonları hem kemanlar var: Sadece tutar çünkü animasyon yönetmek için bir sınıf eklemek için yalnızca sınırlı am

• SVG using SMIL animation
• SVG using CSS animation

benim kod düzenlenmiş ve ayrıca css animasyonları ile bunu yapmak mümkün olduğunu hissediyorum.

Answer 1

Eğer loader.svg içinde css animasyon ayarlayabilirsiniz:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <style> 
    rect{ 
     animation:fill 1s linear infinite; 
    } 

    @keyframes fill{ 
     0%{ 
     fill:#f05223; 
     } 
     100%{ 
     fill:white; 
     } 
    } 

    rect:nth-child(2){ 
     animation-delay:.25s; 
    } 

    rect:nth-child(3){ 
     animation-delay:.50s; 
    } 

    rect:nth-child(4){ 
     animation-delay:.75s; 
    } 
    </style> 
    <rect width="50" height="50" stroke="white" fill="white"></rect> 
    <rect x="50" width="50" height="50" stroke="white" fill="white"></rect> 
    <rect x="50" y="50" width="50" height="50" stroke="white" fill="white"></rect> 
    <rect width="50" x="0" y="50" height="50" stroke="white" fill="white"></rect> 
</svg> 

https://plnkr.co/edit/tcbdwaSNgadrKYQr5iex?p=preview

Answer 2

Sen SMIL kullanmaya devam edebilirsiniz

, tek ihtiyacınız sayfaya bir polyfill eklemektir. Bu (sadece sayfaya ekleyin) kolaydır ve tüm tarayıcılarda mükemmel çalışır. Fakesmile (https://leunen.me/fakesmile/index.html) ile başlamanızı öneririm. Daha gelişmiş ve donanım ivmesi olan bir şeye ihtiyacınız varsa, Google polifill'ini (https://github.com/ericwilligers/svg-animation) deneyin.

daha geniş bir açıklama için bu yazıyı, polyfills bir listesini ve Canlandırmak kullanabilirsiniz kütüphanelerin bir inceleme okuyun SVG:
https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec