Want help with Snap.svg? (And a few more examples...)

This post is more than 2 years old.

Just a quick note that if you are digging Snap.svg and want some support, you can post to the Google group that was set up: https://groups.google.com/forum/#!forum/snapsvg.

Obviously you can ask me as well (grin), and in fact, someone on the group already asked for a few small examples that I thought I'd share here. Nothing too exciting, but here we go.

First - I was asked about how to handle click events using Snap.svg. Snap.svg provides a click handler for your fragments (think parts of your SVG) that makes this easy.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ray1</title>
        <script src="snap.svg-min.js"></script>
		<script>
			window.onload = function () {
            	var s = Snap("100%", 600);
				Snap.load("first.svg", function(f) {
					
					redSomething = f.select("#red");

					redSomething.click(function() {
						console.log("You clicked the red thing!");	
					});
					
					s.append(f);
				});
				
			};
		
		</script>
    </head>
    <body>
		
		<div id="graphic"></div>
    </body>
</html>

You can run a demo of this here: http://www.raymondcamden.com/demos/2013/nov/1/test.html. Be sure to open your console of course and click the red thing. Thrilling.

Next I was asked to make the fragment animate to half its size. Animating a size difference is pretty easy too:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ray1</title>
        <script src="snap.svg-min.js"></script>
		<script>
			window.onload = function () {
            	var s = Snap("100%", 600);
				Snap.load("first.svg", function(f) {
					
					redSomething = f.select("#red");

					redSomething.click(function() {
						console.dir(redSomething);
						var width = redSomething.attr("width");
						var height = redSomething.attr("height");
						redSomething.animate({width:width/2,height:height/2}, 2000);
					});
					
					s.append(f);
				});
				
			};
		
		</script>
    </head>
    <body>
		
		<div id="graphic"></div>
    </body>
</html>

Again, not terribly thrilling, but easy to do. You can try this yourself here: http://www.raymondcamden.com/demos/2013/nov/1/test2.html.

For something that is thrilling, check out this article on animating icons with Snap.svg: Animated SVG Icons with Snap.svg.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by John G posted on 11/13/2013 at 2:54 AM

Thank you. I've joined the google group.

Comment 2 by Matt posted on 12/10/2013 at 8:02 PM

Hi Raymond, love you're demos and blog overall. I found you through researching SnapSVG. It looks powerful and incredibly useful! However the Documentation on snapsvg.io is a little overwhelming. I'm able to bind events such as hover and click but am struggling to bind multiple events for example to draw a path and have an object animate along it, any pointers or direction you can give me?

Comment 3 by Les Ballard posted on 9/4/2014 at 7:34 AM

Using Snap.svg - I'm trying to load an svg graphic, select specific groups within that svg and then apply sequential path transform animations. I've tried all the examples on snap.io and on SO but I can't get it to work. I'm racking my mind for a few hours and I still have yet to figure it out. Any help would be GREATLY appreciated. Disclaimer: I'm a bit of a JS n00b, so please be kind :)

http://stackoverflow.com/qu...

Comment 4 by Raymond Camden posted on 9/4/2014 at 6:06 PM

I haven't had the time to play with Snag in ages. Sorry. I'd try the Google group.