SVG是与分辨率无关的图形。 这意味着它将在任何类型的屏幕上看起来都不错,而不会损失任何质量 。 除此之外,您还可以通过一些动画效果使SVG活跃起来。
在先前的SVG系列文章之一中,我们向您展示了SVG动画如何与<animate>元素一起工作,尽管它处于较低水平。 这次,我们将共享几个JavaScript库,这些库有助于将SVG动画扩展到一个新的水平。
1. Vivus
Vivus是一个JavaScript库, 使您的SVG可以被绘制 。 Vivus开箱即用,无需任何依赖项(例如jQuery)。 只需在HTML中包含.js
文件,然后指定要设置动画的SVG元素以及一些预设选项即可立即开始动画。
例如:
new Vivus( 'svg-element', { type: 'oneByOne', duration: 200 });
上面的内容将使我的SVG元素(在200毫秒内)具有svg-element
ID的动画。 该SVG的每个元素将在该时间范围内一个接一个地绘制。