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

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.

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.