使用 Snap 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