SnapsvgwithAngular

Snap.svg with Angular.js

by Steven Senkus

HTML

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<div ng-app="myApp">
    <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" width="154.872px" height="63.582px" viewBox="0 0 154.872 63.582" enable-background="new 0 0 154.872 63.582"
    xml:space="preserve" app-logo>
        <path id="logo-l" d="M0,0h11.017v39.315h19.297v9.217H0V0z"/>
        <path id="logo-o1" d="M71.21,30.531c0,12.889-9.146,18.793-18.578,18.793c-10.297,0-18.218-6.769-18.218-18.146
                s7.489-18.649,18.794-18.649C64.01,12.529,71.21,19.946,71.21,30.531z M45.72,30.891c0,6.049,2.52,10.585,7.201,10.585
                c4.249,0,6.984-4.249,6.984-10.585c0-5.256-2.016-10.585-6.984-10.585C47.664,20.306,45.72,25.706,45.72,30.891z"/>
        <path id="logo-g" d="M111.602,13.321c-0.145,2.232-0.288,5.185-0.288,10.441V43.42c0,6.769-1.368,12.313-5.329,15.841
                c-3.888,3.312-9.145,4.32-14.328,4.32c-4.609,0-9.506-0.936-12.674-2.736l2.16-8.281c2.232,1.296,6.121,2.665,10.225,2.665
                c5.185,0,9.146-2.809,9.146-9.289v-2.304h-0.145c-2.088,2.952-5.473,4.608-9.505,4.608c-8.713,0-14.905-7.057-14.905-17.209
                c0-11.305,7.345-18.505,15.985-18.505c4.824,0,7.849,2.088,9.649,4.968h0.144l0.36-4.176H111.602z M100.368,27.65
                c0-0.72-0.072-1.44-0.216-2.016c-0.792-2.88-2.88-4.824-5.904-4.824c-3.961,0-7.201,3.6-7.201,10.009
                c0,5.256,2.593,9.361,7.201,9.361c2.808,0,5.04-1.873,5.761-4.464c0.287-0.792,0.359-1.944,0.359-2.88V27.65z"/>
        <path id="logo-o2" d="M154.872,30.531c0,12.889-9.145,18.793-18.577,18.793c-10.297,0-18.218-6.769-18.218-18.146
                s7.489-18.649,18.794-18.649C147.672,12.529,154.872,19.946,154.872,30.531z M129.383,30.891c0,6.049,2.52,10.585,7.2,10.585
                c4.248,0,6.984-4.249,6.984-10.585c0-5.256-2.016-10.585-6.984-10.585C131.326,20.306,129.383,25.706,129.383,30.891z"/>
    </svg>
</div>

CSS

</style>
<script type="text/javascript" src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<style>

JavaScript

//BootStrap
var myApp = angular.module('myApp',[
    'myDirectives'
]);

//Directives
var myDirectives = angular.module('myDirectives',[]);
myDirectives.directive('appLogo',function(){
    return function($scope, $element, $attr){
        var logo = Snap($element[0]);
        var parts = [["logo-l", [0, -20]], ["logo-o1",[0, -20]], ["logo-g",[0,-20]], ["logo-o2",[0,-20]]];
        var i=0;
        
        for(i = 0; i<parts.length; i++){
            var el = parts[i];
            var element = logo.select("#" + el[0]);
            element.attr({
                opacity:0,
                transform: "t" + el[1]
            });
            parts[i].push(element);
        }
        
        i=0;
        function showEach() {
            parts[i][2].animate({ 
                transform: "t0,0",
                opacity: 1
            }, 200, mina.easeout);
            showTimer = setTimeout(showEach, 200);
            i++;
        }
        
        logo.click(function(){
            this.animate({
                opacity:0.5
            }, 1000, mina.easeout);
    this.animate({
                opacity:1
            }, 2000, mina.easeout);            
        });
        
        showEach();
    };
});