Как определить, доступна ли SVG-анимация?

Question

Есть ли хороший способ определить, доступна ли SVG-анимация, и затем соответствующим образом настроить DOM?

Я использую animateMotion для анимации движения g, содержащего image с.Это работает только в Mozilla;еще хуже то, что animateMotion без запуска оставляет изображения в разных позициях как в Mozilla, так и в WebKit (но не в одном и том же месте!).

Кажется, мне нужен способ настройки свойствg и изображения, чтобы иметь дело с каждым сценарием, и добавлять тег animateMotion, только если он будет работать.Есть предложения?

Answer 1

Modernizr обнаруживает только наличие функции высокого уровня и доверяет браузеру не лгать.Например, у настольного Safari есть большое «Да» для SMIL от Modernizr.Но SMIL только частично реализован практически во всех браузерах (даже в Firefox 4!), И вам нужно протестировать анимацию каждого отдельного атрибута, чтобы точно определить, какой из них работает или нет.

Например, вы не можете анимировать startOffset для текста на анимации пути в Desktop Safari с использованием SMIL.Нет библиотеки, которая бы обнаруживала существование функций для подобных вещей.

ИМХО, там, где они существуют, вы должны использовать CSS-преобразования / анимации для анимации общего назначения на всем, кроме IE.Для IE используйте анимацию Javascript (или Canvas).

(Кстати, animateTransform в Chrome не работает - он неправильно вычисляет переводы)

Answer 2

У меня только что была эта проблема с телефоном Samsung под управлением Android 4.2.2.Это сообщило бы true для всех трех из них: Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil, но без анимации и путей прохождения клипов, где произошла ошибка.Похоже, что только один элемент может иметь путь клипа.В любом случае мы закончили с этим не очень хорошим разрешением:

isAndroid = /Android/.test( navigator.userAgent );

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

Answer 3

Modernizr обнаруживает поддержку SVG-анимации (SMIL).

Без полного примера невозможно точно сказать, что вызывает различия.