SVG动画只需添加一个类

Question

我使用SMIL动画创建了一个svg加载器动画.我只是添加一个类名即显示元素中的svg loader.

小提琴(点击容器查看装载机)

.loader{
    position: relative;
}

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

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

但是现在,我意识到SMIL在chrome中被弃用了.所以,我决定使用CSS处理动画.但是如果我使用css处理动画,那么我将无法像上面那样管理代码,即只需添加一个类.

如果我使用css动画,我需要在容器中添加一个新元素,然后使用inline-svg概念,IMO.

无论如何,我可以通过在使用CSS动画时添加一个类来管理动画吗？

一些要点:

• 我不想添加任何新元素.
• 我将使用JavaScript只是为了添加一个类而不是别的.
• 我不想生成gif(光栅图像).

我有SMIL和CSS动画的小提琴:

• SVG使用SMIL动画
• SVG使用CSS动画

我只是局限于添加一个类来管理动画,因为它保持我的代码组织,我觉得也可以用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