SVG-Animation nur durch Hinzufügen einer Klasse

Question

Ich erstellte eine SVG-Lader-Animation mit SMIL-Animation. Ich zeige die Svg innerhalb eines Elements, indem Sie einfach einen Klassennamen hinzufügen, d. H. loader.

Fiddle

.loader{ 
    position: relative; 
} 

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

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

Aber jetzt (klicken Sie auf den Container des Laders zu sehen), erkannte ich die SMIL is deprecated in chrome. Also entschied ich mich für Animationen mit CSS. Aber wenn ich Animationen mit CSS behandle, kann ich den Code nicht wie oben beschrieben verwalten, sondern nur durch Hinzufügen einer Klasse.

Wenn ich CSS-Animationen verwenden, muss ich ein neues Element in den Container hinzufügen und dann Inline-Svg-Konzept, IMO verwenden.

Gibt es sowieso, kann ich die Animation verwalten, indem Sie einfach eine Klasse hinzufügen, wenn Sie CSS-Animationen verwenden?

Einige Punkte:

• Ich will keine neue Elemente hinzuzufügen.
• Ich werde JavaScript nur zum Hinzufügen einer Klasse und für nichts anderes verwenden.
• Ich möchte kein gif (ein Rasterbild) erzeugen.

Ich habe Geigen für beide SMIL und CSS-Animationen:

• SVG using SMIL animation
• SVG using CSS animation

ich nur nur begrenzt bin eine Klasse hinzufügen, um die Animation zu verwalten, weil es mein hält Code organisiert und auch ich fühle, dass es möglich ist, dies auch mit CSS-Animationen zu tun.

Answer 1

können Sie die CSS-Animation in Ihrem loader.svg gesetzt:

<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

Sie können weiterhin SMIL verwenden, alles, was Sie brauchen, ist eine polyfill zu Ihrer Seite hinzuzufügen. Es ist einfach (fügen Sie es einfach der Seite hinzu) und funktioniert perfekt in allen Browsern. Ich empfehle Ihnen, mit Fakesmile (https://leunen.me/fakesmile/index.html) zu beginnen. Wenn Sie etwas fortgeschritteneres und mit Hardwarebeschleunigung benötigen, versuchen Sie das Google-Polyfill (https://github.com/ericwilligers/svg-animation).

Lesen Sie diesen Artikel für eine breitere Erklärung, eine Liste von polyfills und eine Bewertung von Bibliotheken, die Sie verwenden können, SVG animieren:
https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec