How to divide an image in SVG into parts?

Question

css

Hello!
I wanted to make an animation out of the logo. The picture is in svg format, I tried to split it into separate svg and wrap it in a div to control the animation through css. I selected a viewbox for each petal at random and my gradient moved out, how to repeat exactly the same picture through individual petals without knocking down the gradient?
Here's the svg image itself: https://codepen.io/anon/pen/wyyJWa
Here's what I screwed up: https://codepen.io/anon/pen/MQQpem
Please help!
Thanks in advance!

Answer 1

Look closely at the svg code, you can set classes or id for each element separately, and then refer to these classes and assign styles and more. You don't have to take it apart.