lcdsantos / jquery-drawsvg Goto Github PK

View Code? Open in Web Editor NEW

768.0 41.0 139.0 63 KB

Lightweight, simple to use jQuery plugin to animate SVG paths

Home Page: http://lcdsantos.github.io/jquery-drawsvg/

License: MIT License

JavaScript 43.08% HTML 40.82% CSS 16.10%

jquery svg svg-animations animation jquery-plugin

jquery-drawsvg's Introduction

jQuery DrawSVG

This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.

Weighs less than 2KB minified and 800 bytes gzipped.
Easy to use.
Easing and stagger support.
Free!

Usage

Include jQuery DrawSVG after jQuery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.drawsvg.js"></script>

Initialize the plugin on the element you want to animate and store in a variable

var mySVG = $('#my_svg_element').drawsvg();

Run the animation

mySVG.drawsvg('animate');

Look at the demos for more advanced usages.

Options

Option	Type	Default	Description
`duration`	Integer	`1000`	The time to complete the animation of each path.
`stagger`	Integer	`200`	Delay to start animating each individual path.
`easing`	String	`swing`	Which easing function each path will use to transition. Use jQuery Easing Plugin for different easing functions.
`reverse`	Boolean	`false`	Direction that the line will be drawn.
`callback`	Function	`function() {}`	A function to call once the animation has been completed.

Demos

jquery-drawsvg's People

Contributors

Stargazers

Watchers

Forkers

yashilanka gdseller bdwebteam ystallonne carabina shivamanhar rakesh-mohanta arrolin truesibo nvdnkpr yomigits pdw-studio diansigit besrabasant nasoskouroupis karimabdul anam5233 kathcue handsomeko joeynimu andy737 elf9237 erikasf klaudit kosowwwa bartektomas aneudy2000 alexisarce coolguywbp sixtomay loki315zx kingslou yeheyt umarmughal cfratila chanyisen luokizz dwi-lanang thebigger 7040210 guy-dvir nickchen14 tamara-reznikova vienpn ray888 jackeasons vanitax razzy7 niconal effectplug markerui thisroot stonecypher redboss1 meihangbo kurienkoa munear binarygrrl filmtree jilliancain hhy5277 jocklei matschess alenka-als cube3power 23creative gdg ngc-dev02 rajatv1 thetusharchadha mdnbras sdavignon anningwang stan83w vonralls frank7755 republicvirgo lsf00txtp009 ranjithsiji teruaki-nakajima rainyxy droidwizard codegorrilla fredotieno femotizo verstai ronak2ram althafn96 kenthefley ujjalkar dazmoob marqu3ss hkmtqffr tollcoding louisjk shantanuatul pregovimb zeinamakky frontendhub blackmode

jquery-drawsvg's Issues

reverse option

Hi,

I'm trying to reverse the animation using the 'reverse' option, but the plays still forward :(
I pasted below the code

var schengenMap = $('#schengen').drawsvg({reverse: true});
schengenMap.drawsvg('animate');

thank you in advance,
matteo

Callback on multiple drawsvg elements

I'm running .drawsvg within a .each loop to draw all the SVGs on my page, however when I try and use $(this) or any variable scoped within the .each, it does not work - my variables are not passing to the callback. Or rather, the LAST variable defined in the each (so my last item) is the variable that gets passed to ALL the callbacks.

For example, I have the letters: R E N - and every callback returns N in the console.log - instead of each returning the correctly scoped variable letter.

I've tried passing the variable through like callback: function(letter) - but this has no effect.

Help?

$('.logo-letter').each(function(){
var letter 	= 	$(this),
	thisSvg = 	$(this).find('svg'),
	mySvg 	= 	thisSvg.drawsvg({
			callback: function() {
						console.log($(this));
						letter.addClass('loaded');
					}
				});
	mySvg.drawsvg('animate');
});

Request for filled paths

Hey

Not an issue but more of a request.
Is there any way you can mimic the drawing effect from the path strokes on the path fills? (e.g. I have some vectors where the paths are filled with black, when I try that with your code it doesn't look so good)

For the rest, great script, works very smooth!!
If you could give me some tips to do this myself it would be also great :)

'SVGElement.offsetHeight' is deprecated

Chrome Canary reports "'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details". Obviously not too pressing yet but I thought I'd mention it.

,

Doesnt work?

Hi i have a problem with the following svg. Could you please help me?

Question - Is it possible to draw dashed lines?

Hi! Thanks for the plugin!

Is it possible to draw dashed lines? I exported a dashed line from Sketch but when I use the plugin to draw the line it removes the dashed.

Cheers!

Uncaught TypeError: $(...).drawsvg is not a function

it looks a great piece but i cant use it because of this error i get in chrome.

Uncaught TypeError: $(...).drawsvg is not a function

plz help

Jquery-drawsvg wont work on ipads

Animations wont run on iPad, is there a fix for this?

Doesn't work with basic shapes ?

Hi, I can make your plugin work with a svg path but not with a svg rectangle.
Is there limitations about that ?
Thanks !

Safari (possible iOS) Problem

In Safari, 'use strict'; is throwing a syntax error...

SyntaxError: Cannot declare a parameter named 'progress' as it shadows the name of a strict mode function.
(anonymous function)jquery.drawsvg.js:53

TypeError: $({ len: 0 }).animate is not a function. (In '$({ len: 0 }).animate', '$({ len: 0 }).animate' is undefined)

Here's the stack error.

[Error] TypeError: $({ len: 0 }).animate is not a function. (In '$({ len: 0 }).animate', '$({ len: 0 }).animate' is undefined)
animate (jquery.drawsvg.js:101)
(anonymous function) (jquery.drawsvg.js:129)
each (jquery-3.1.1.slim.min.js:2:3036)
(anonymous function) (index.html:873)
dispatch (jquery-3.1.1.slim.min.js:3:10565)
trigger (jquery-3.1.1.slim.min.js:3:30395)
(anonymous function) (jquery-3.1.1.slim.min.js:3:30907)
each (jquery-3.1.1.slim.min.js:2:3036)
h (bootstrap.min.js:7:1953)
_transitionComplete (bootstrap.min.js:7:2910)
l (bootstrap.min.js:7:2299)
_activate (bootstrap.min.js:7:2369)
show (bootstrap.min.js:7:1974)
(anonymous function) (bootstrap.min.js:7:3117)
each (jquery-3.1.1.slim.min.js:2:3036)
_jQueryInterface (bootstrap.min.js:7:2961)
(anonymous function) (bootstrap.min.js:7:3289)
dispatch (jquery-3.1.1.slim.min.js:3:10565)

webpack

This module is not natively usable with webpack.

Animation of a SVG graph does not work

Dear Leonardo and users of jQuery DrawSVG,

first of all many thanks to Leonardo for providing this plugin! I would like to apply it to animate an SVG graph attached to this post (as SVG file in the folder GerIPI.zip). In my attempts to bring it to work, I added the code directly in the html document and tried the simplest code:
var $svg = $('svg').drawsvg();
$svg.drawsvg('animate');
However, this did not work. Maybe there is some problem with the SVG file (which I unfortunately cannot find) since an attempt with some simple manually entered SVG code was successful.

I would be very grateful if someone could give me any hint what could possibly go wrong while trying to animate my SVG graph. Many thanks in advance for your help!

GerIPI.zip

Add npm install

As ES2016 becomes more and more popular, it would be awesome, if you would add an install method for node, so that we could use your awesome library by simply importing the drawsvg module. This would also make it a breeze to update the code without re-downloading your source files.

How to use it in vue.js project

Hey, can anyone help me use drawSVG in my vue.js project

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.