逐渐改变使用变换在SVG中填充SVG元素

Question

我试图模拟在SVG中逐渐“填充”（如水填充杯）元素。我用面具遇到了麻烦。对于下文中，假设包含snap.svg-min.js的：

<script> 
var s = Snap(500,500); 
var a = s.rect(0,100,100,100); 
var b = s.ellipse(50,50,30,60); 
b.attr({ 
    fill: "white" 
}); 
a.animate({transform: 't0, -100'}, 500, mina.easin); 
a.attr({ 
    mask: b 
}); 
</script> 

在a.attr剪辑掩模图像最初，并转移，最多。我想填充上去的椭圆。

有点像下面的倒数：

<script> 
var s = Snap(500,500); 
var a = s.rect(0,100,100,100); 
var b = s.ellipse(50,50,30,60); 
b.attr({ 
    fill: "white" 
}); 
a.animate({transform: 't0, -100', mask: b}, 500, mina.easin); 
</script> 

Answer 1

你一部分那里，有几种不同的方式，你很可能也使用剪辑，而不是一个面具，但这里的沿线道路我觉得你试图...

交换周围的面具..

var a = s.rect(0,0,120,120).attr({ fill: 'white', transform: 't0,100' }); 
var b = s.ellipse(50,50,30,60); 

b.attr({ 
    fill: "red", 
    mask: a 
}); 

a.animate({transform: 't0,60' }, 2000, mina.easin) 

jsfiddle