JQUERY-DRAWSVG-HTML5 Lightweight Plug-in

In the HTML5 , there are many plug-ins, today's small series for everyone to share the many plugins in the Jquery-drawsvg plugin.

Jquery-drawsvg is what plug-in it? In fact, Jquery-drawsvg is a lightweight plug-in that uses jquery to draw an SVG graphics contour path animation. The plugin uses the jquery built-in animation engine to animate the path element in the SVG element, using the Stroke-dasharray and Stroke-dashoffset properties for its underlying implementation.

Features of Jquery-drawsvg

1, lightweight, less than 2kb after compression;

2, easy to use;

3, support easing transition animation effect;

How to use Jquery-drawsvg

Using this SVG graphics Contour path Animation plugin requires the introduction of jquery and Jquery.drawsvg.js files:

<script src= "Js/jquery.min.js" ></script>

<script src= "Js/jquery.drawsvg.js" ></script>

Initializing plug-ins

After the page DOM element has been loaded, you can animate the SVG shape by creating a contour animation effect by using the following method.

1. Save the Initialized object instance as a variable:

var mysvg = $ (' #my_svg_element '). Drawsvg ();

2, the animation effect is performed

Mysvg.drawsvg (' animate ');

Configuration parameters for Jquery-drawsvg

When creating SVG path animations using jquery-drawsvg, it is often necessary to use the configuration parameters:

Parameters	Type	Default value	Describe
Duration	Integer	1000	Complete the duration of each path animation
Stagger	Integer	200	Delay time before each path animation starts
Easing	String	Swing	Transition animation effects using the jquery easing plugin
Reverse	Boolean	FALSE	Whether to draw backwards
Callback	Function	function () {}	callback function after path animation is complete

The above is HTML5 jquery-drawsvg plug-in related knowledge, I hope everyone in the use of this plugin is helpful.

Related reading: How to control the background music of the HTML5 page via the button? "

JQUERY-DRAWSVG-HTML5 Lightweight Plug-in