Javascript 在Snap.SVG中加载多个SVG文件是否冲突？

问题出在这里。我正在尝试使用Snap.SVG制作一些SVG动画。我使用一些预先绘制的svg资产

我可以用snap加载单个svg文件，但当我尝试加载多个svg文件时，颜色都乱了

我在谷歌上搜索并尝试了不同的解决方案，包括将它们加载到单独的svg元素中，逐个加载，使用angular$complie预编译加载的svg。。。。但所有这些都不起作用：

有人对什么地方出了问题有什么建议吗

下面是我用来加载svg的代码片段

    var s = Snap(target);
    var g = s.group();
    Snap.load("../assets/svg/"+part+".svg",function(f){
        g.append(f);
        g.drag();
        resolve();
    })

这是我的角度尝试

.directive('snap', ['$compile',
function($compile){
    return {
        restrict: 'E',
        link: function(scope, elem, attrs){
            var s = Snap(400,400);
            Snap.load('../assets/svg/'+attrs.part,function(f){
                s.append(f);
                elem.append($compile(s)(scope));
            });
        }
    };
}

请帮忙，谢谢

---

所有SVG文件都是由illustrator生成的

我会尝试将它分离为两个最小的文件，然后将它们放在JSFIDLE上查看，而不需要角度的东西。@lan