Как или в чем назначить классы сложному svg изображению для анимации?

Question

[elleremo]

В web-проекте (тест) имеется сложная svg картинка, много слоев и элементов. Предполагается что некоторые из элементов в svg будут двигаться, исчезать, появляться по мере прохождения теста. Есть ли способ как-то удобно назначить классы элементам, может быть какой-то редактор.

Спасибо!

Comments

[eternalfire]

в любом текстовом редакторе откройте svg и добавьте классы в нужные теги

[elleremo]

ну так проблема то как раз в том, что в svg черт ногу сломит. Как там понять какой кусок текста какому элементу(визуальному) принадлежит ...

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

Answer 1

[Степан Воеводин]

Самый лучший способ - это:
1. Сначала открыть SVG каким-нить векторным редактором (например illustrator или figma). Сгруппировать слои по порядку как они у тебя будут анимироваться.
2. После закинуть куда-нить на codepen или открыть блокнотом и в необходимых местах прописать классы.
В codepen будет удобнее тем, что если уберешь строку - сразу будешь видеть что с картинки пропало.