Как делать анимации внутри svg вставленной через img?

Question

[wakenbyWork]

Есть такие svg изображения:

Изображения

Они вставлены через тег img. И пришла задача сделать им анимацию. Чтобы на графике с ракетой, ракета двигалась и по очередь появлялись цифры. На втором скрине шестеренки должны крутиться и на графике круги.

Как это можно сделать? Сейчас пробую в самом svg писать css с анимацией. Желательно чтобы она срабатывала при скролле с появлением в области видимсоти экрана. Это уже как-то js нужно добавить (Но на счет срабатывания при скролле, это не обязательно, просто интересно можно ли )

Comments

[FrelFrloich]

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

[Вадим]

FrelFrloich, Вы хотите сказать, что

Сейчас пробую в самом svg писать css с анимацией.

не будет работать, когда автор вставит эту свг через тэг img?

[FrelFrloich]

Вадим, ну он берет свг и вставляет как допустим jpg, можно применить фильтры и тд, но как обычную анимацию с хавер не удастся, это обычная картинка, покрутить можно, сузить, расширить, трансформучку в лево право и тд, но как с свг работать не будет, то же обращение к path,филл строк и тд.

[Вадим]

FrelFrloich, А Вы вопрос читали вообще? Автору нужны просто анимации внутри картинки(элементов изображения).
Если он опишет их на css внутри svg и вставит эту svg через тэг img то всё там будет работать(в последних версиях браузеров точно)
По скролу, конечно, их запускать не получится. Но всё что описал автор - да.

Answer 1

[MeMoJlor]

Попробуйте открыть SVG файл и вставить код на страницу, не используя img. Затем найдите нужный элемент через devtools и анимируйте его.

Answer 2

[profesor08]

В svg есть специальный одноименный тег для анимации всего и вся, пользуйся им: https://developer.mozilla.org/ru/docs/Web/SVG/Elem...

Но надо понимать, что работать анимации внутри svg вставленной как картинка будут не во всех браузерах. Все зависит от реализации движка и дозволенности. Это же касается и CSS анимаций внутри svg вставленной как картинка.