我使用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动画时，我可以通过添加类来管理动画？
一些要点：
对于SMIL和CSS动画，我都有一些小提琴：
我只限于添加一个类来管理动画，因为它可以使我的代码保持井井有条，而且我认为也可以使用CSS动画来做到这一点。
您可以在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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句