javascript - Snap.svg:遮盖路径中的图像会产生奇怪的不透明度和滤镜效果

我对这个问题很不满意，我试图为每个路径创建一个普通的蒙版，以便在使用Snap之后进行动画处理，问题是当我应用蒙版时，图像会变成黑白，并降低了它的不透明度。

https://jsfiddle.net/adrianperez/agevu82g/1/

我曾在snap.js Google小组中问过，但目前没有任何答案，是否有任何线索表明我在做什么错？

var s = new Snap('.brushes'),
allPaths = s.selectAll("path");

allPaths.forEach(function(el) {
el.attr({
  fillOpacity: 0
 });
});


for(i = 0; i < allPaths.length; i++){
var thisPath = allPaths[i],
    img = s.image('http://cf067b.medialib.glogster.com/media/60/607ef3f3255bd2db1e2444562b7468b595e287b42a1ea594ec8a98d30f7ce9f5/cute-kitten.jpg', 0, 0, 454, 322);

img.attr({
fill: 'white'
});

thisPath.attr({
mask:img
});
thisPath.animate({fillOpacity: 1}, 200);

}
s.append(allPaths);

最佳答案

好！解决了，这是小提琴

https://jsfiddle.net/agevu82g/8/

var s = new Snap('.brushes'),
allPaths = s.selectAll("g");

allPaths.forEach(function(el) {
el.attr({
    fillOpacity: 0,
    fill: 'white'
});
});


allPaths.forEach( function(el, i ) {
var img =   s.image('http://cf067b.medialib.glogster.com/media/60/607ef3f3255bd2db1e2444562b7468b595e287b42a1ea594ec8a98d30f7ce9f5/cute-kitten.jpg', 0, 0, 454, 322);

img.attr({ mask: el });

setTimeout( function() {
    el.animate({fillOpacity: 1}, 2000);
}, i * 1000);


});

关于javascript - Snap.svg:遮盖路径中的图像会产生奇怪的不透明度和滤镜效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29915297/