Snap.svg: 遮蔽路径中的图像会产生奇怪的不透明度和滤镜效果
Snap.svg: Masking image in path makes a weird opacity and filter effect
我有这个 fiddle 问题,我正在尝试为每条路径实现一个正常的遮罩,以便在使用 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);
好的!解决了,这里是 fiddle working
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);
});
我有这个 fiddle 问题,我正在尝试为每条路径实现一个正常的遮罩,以便在使用 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);
好的!解决了,这里是 fiddle working
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);
});