Как оживить группу SVG в целом?

Question

Я использую Snap.svg для создания анимации. В настоящее время у меня есть два элемента (один круг и один эллипс). Элементы будут транслироваться вместе, и эллипс также вращается и меняет форму. Я могу использовать функцию Element.animate() в Snap.svg для анимации каждого элемента, но очень сложно поддерживать их гармоническое преобразование. Итак, как я могу анимировать элементы в целом? Фрагмент html помещается на https://gist.github.com/dongli/8124267.

PS: Атрибуты cx ииз centroid не обновляются после каждого кадра анимации. Я ожидаю, что они будут изменены.

Спасибо за помощь!

Answer 1

Snap предоставляет групповую функцию (также набор, но группа является правильным элементом svg, поэтому, как мне кажется, обычно предпочитается). Таким образом, у вас есть один элемент группы, и вы можете выполнить одну передачу ...

var s = Snap(400,400); 

var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red'}); 
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue', }); 

var g = s.group(r,c); 

g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce); 

Работая здесь. http://jsfiddle.net/n8Een/2/. Если у вас все еще есть проблемы, введите свой код в jsfiddle.