SVGアニメーションをクラス追加するだけで

Question

私はSMILアニメーションを使ってsvgローダーアニメーションを作成しました。クラス名、つまりloaderを追加するだけで、要素内にsvgを表示しています。

Fiddle（ローダーを表示するには、コンテナのクリック）

.loader{ 
    position: relative; 
} 

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

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

しかし、今、私はSMIL is deprecated in chromeを実現。だから、私はCSSを使ってアニメーションを扱うことにしました。しかし、もし私がcssを使ってアニメーションを扱うならば、私は上でやっているように、つまりクラスを追加するだけで、コードを管理することができなくなります。

私はCSSアニメーションを使用している場合は、コンテナ内に新しい要素を追加し、インライン - svgの概念、IMOを使用する必要があります。

CSSのアニメーションを使用するときにクラスを追加するだけでアニメーションを管理できますか？

いくつかのポイント：

• 私は、新しい要素を追加する必要はありません。
• JavaScriptを使用してクラスを追加するだけです。
• gif（ラスターイメージ）を生成したくありません。

私はSMILとCSSアニメーションの両方のためのフィドル持っている：私はちょうどそれが保持されるため、アニメーションを管理するためのクラスを追加するためにのみ制限されています

• SVG using SMIL animation
• SVG using CSS animation

を私コードを整理し、また、CSSアニメーションでもそうすることが可能だと私は思っています。

Answer 1

あなたloader.svgでCSSアニメーションを設定することができます。

<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

あなたはSMILを使用し続けることができ

は、あなたが必要とするすべてはあなたのページにポリフィルを追加することです。これは簡単です（ページに追加するだけ）、すべてのブラウザで完全に動作します。私はFakesmile（https://leunen.me/fakesmile/index.html）で始めることをお勧めします。より高度な機能やハードウェアアクセラレーションが必要な場合は、Googleのpolyfill（https://github.com/ericwilligers/svg-animation）を試してみてください。

より広範な説明、polyfillsのリストとあなたがSVGをアニメーション化するために使用できるライブラリのレビューのために、この記事を読む：
https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec