Как картинку в SVG разделить по частям?

Question

[One of Us]

Здравствуйте!

Хотел сделать из логотипа анимацию. Картинка в svg формате, попробовал разбить ее на отдельные svg и обернуть в div чтобы управлять анимацией через css. К каждому лепестку подбирал viewbox наугад и у меня съехал градиент, как в точности такую же картинку повторить через отдельные лепестки не сбивая градиент?
Вот сама svg картинка: https://codepen.io/anon/pen/wyyJWa
Вот то что я напортачил: https://codepen.io/anon/pen/MQQpem
Помогите, пожалуйста!
Заранее спасибо!

Answer 1

[Dima Polos]

Посмотрите внимательно на код svg, Вы можете задать классы или id каждому элементу отдельно, а потом на эти классы ссылаться и назначать стили и не только. Не надо его разбирать на части.

Comments

[One of Us]

Просто IE, опера и что-то еще не поддерживают управление SVG элементами через CSS