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.
Archived Comments
Thank you. I've joined the google group.
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?
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...
I haven't had the time to play with Snag in ages. Sorry. I'd try the Google group.