给SVG加动画效果

381 阅读1分钟

在项目中使用svg做了背景边框,需要加一点小的装饰效果,就是一些小的色块闪烁,让背景看起来不那么死板。 效果比较简单。考虑直接加在svg文件里。

给svg加动画有3种方式

  1. 用javascript
  2. 用css animation
  3. 用svg animation

使用 www.svgator.com/ 可以把svg中的每条路径作为对象,单独设置动画,确实是很方便的方式。

image.png 导出时可用选择用javascript还是css实现动画。

第3种方式是用svg animation. 这个闪烁效果比较简单。那么加一句代码就可以

增加闪烁以前的色块部分:

<path class="cls-5" d="M326.51,29.57h54.05v4H326.51Z"/>

在里面加一个动画效果,控制不透明度变化。

<path class="cls-5" d="M326.51,29.57h54.05v4H326.51Z">
 <animate attributeName="fill-opacity" values="1;1;0;1" dur="3s" repeatCount="indefinite" />
</path>

最后效果如下: