使用 Snap.svg 进行遮罩在 AngularJS 中有效吗？答案

【问题标题】：Does masking with Snap.svg work in AngularJS?使用 Snap.svg 进行遮罩在 AngularJS 中有效吗？
【发布时间】：2014-06-22 00:53:54
【问题描述】：

我已尝试过 Snap.svg 网站上的“入门”教程，还尝试复制此处找到的代码 http://codepen.io/rachsmith/pen/FzAGt

但我似乎无法让 SVG 遮罩工作。

其他人有过这个问题吗？据我所知，我的设置方式与在线教程之间的唯一区别是我对 AngularJS 框架的使用。

【问题讨论】：

你能把它贴在小提琴上吗？
很遗憾没有，我们的环境不对外开放=\
你有没有发现哪里出了问题？我在使用遮罩时遇到了完全相同的问题，也使用了角度。具体来说，这个设置：github.com/DaftMonk/generator-angular-fullstack

标签： angularjs svg mask masking snap.svg

【解决方案1】：

在基本层面上它似乎有效。

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
            });
        }
    };
});

查看 fiddle 上的代码。 http://jsfiddle.net/83Gd4/1/

【讨论】：