使用Snap.svg进行屏蔽是否适用于AngularJS?

时间:2014-05-05 16:25:52

标签: angularjs svg mask masking snap.svg

我在Snap.svg网站上尝试了“入门”教程,并尝试复制此处的代码http://codepen.io/rachsmith/pen/FzAGt

但我似乎无法让SVG屏蔽工作。

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

1 个答案:

答案 0 :(得分:2)

在基础层面似乎有效。

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

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