Постепенно изменяйте заливку элемента SVG, используя преобразование в Snap SVG.

Я пытаюсь имитировать постепенное «заполнение» (например, водой, заполняющей чашку) элемента в 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>

svg svg-animate snap.svg
person Gabe Masiulis    schedule 27.10.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы частично там, есть несколько разных способов, вы, вероятно, могли бы также использовать зажим, а не маску, но вот способ, который, я думаю, вы пытались...

Поменяй маску местами..

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

person Ian    schedule 28.10.2015
comment
Спасибо! это прекрасно работает. Я пробовал что-то подобное, но это не сработало для меня. Возможно, я перепутал синтаксис. - person Gabe Masiulis; 28.10.2015
comment
Нет проблем, не забудьте принять ответ, если он работает. - person Ian; 29.10.2015