Does masking with Snap.svg work in AngularJS?

Question

I have tried the "Getting Started" tutorial on the Snap.svg website and also attempted duplicating the code found here http://codepen.io/rachsmith/pen/FzAGt

But I just can't seem to get the SVG masking to work.

Have other people had this issue? As far as I can tell the only difference between the way I set it up and the tutorials online is my use of the AngularJS framework.

unfortunately no, our environment is not open to the public =\ — Rob Watt, May 15 '14 at 18:15
did u ever figure out what was wrong? I'm getting the exact same problem with masking, also using angular. Specifically, this setup: https://github.com/DaftMonk/generator-angular-fullstack — stackOverlord, Jan 14 '15 at 08:43

score 2 · Answer 1 · answered Jul 24 '14 at 00:03

At a basic level it seems to work.

angular.module('myApp', []).directive('mySvg', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attr) {
            var s = Snap(120, 120);
            element.append(s.node);   
            var first = s.circle(40, 60, 40).attr({
                fill: "#888"
            });
            var second = s.circle(80, 60, 40).attr({
                fill: "#fff"
            });
            first.attr({
                mask: second
            });
        }
    };
});

See the code on fiddle. http://jsfiddle.net/83Gd4/1/

Does masking with Snap.svg work in AngularJS?

1 Answers1