使用 Snap SVG 中的变换逐渐更改 SVG 元素的填充

Question

我正在尝试逐渐模拟 "filling"（就像往杯子里灌水一样）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

使用 Snap SVG 中的变换逐渐更改 SVG 元素的填充

Gradually change fill in SVG element using transform in Snap SVG

svg

snap.svg

svg-animate