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.
