JQUERY-DRAWSVG-HTML5 Lightweight Plug-in

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.