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

使用Snap SVG中的transform逐步更改填充SVG元素

1 个答案: