Обнаружение поддержки браузером CSS-анимированного SVG

Вы можете добавить прослушиватель событий для проверки завершения итерации анимации, а в соответствующем обработчике событий установить флаг, например supportsSVGKeyFramedAnimatedProps = true (если итерация никогда не завершается, значит, она не анимируется).

elem.addEventListener('animationiteration', eventHandler, false)

Это позволит вам «упасть вперед» к вашей SVG-анимации вместо того, чтобы обеспечивать запасной вариант.

Мне интересно, есть ли способ определить, способен ли браузер анимировать элементы SVG с помощью CSS.

Простой ответ: Да, вы можете, как сказал @jhpratt.

Вы можете определить, поддерживает ли браузер функциональность CSS, используя только CSS. Ат-правило @supports CSS позволяет указать объявления, которые зависят от поддержки браузером одной или нескольких определенных функций CSS. Это называется функциональным запросом.

Пример:

@supports (display: flex) {
  div {
    display: flex;
  }
}
@supports not (display: flex) {
  div {
    float: right;
  }
}

Ссылка MDN: https://developer.mozilla.org/de/docs/Web/CSS/@supports

Длинный ответ:

У вас всегда будут некоторые cross-browser проблемы. Проблема, с которой вы столкнулись, беспокоит каждого веб-разработчика. Тем не менее, есть способы обойти эту проблему с поддержкой браузера:

<сильный>1. Вы можете проверить "можно ли использовать" на предмет совместимости:

Ссылка: http://caniuse.com/ Рекомендуется искать любую сомнительную функциональность, например анимацию.

<сильный>2. Используйте автопрефиксер в своем рабочем процессе:

С помощью автопрефиксера вам не нужно большую часть времени беспокоиться об использовании CSS с префиксом, таким как -moz-, -webkit- и т. д. Этот крошечный помощник сделает свое дело за вас, вы даже можете указать некоторые автопрефиксы какие браузеры вы хотите поддерживать.

<сильный>3. Пользовательские сторонние библиотеки:

Существует множество библиотек, которые вы можете использовать для определения браузера и версии. Если вы хотите быть уверены, что ваша анимация безопасна для использования, вы можете просто использовать предоставленную анимацию из библиотек и, конечно же, предварительно проверить совместимость на соответствующих веб-сайтах.

Некоторые громкие имена:

• Angular: https://angularjs.org/ (используйте ng-Animate)
• JQuery: https://jquery.com/
• Гринсок: https://greensock.com/

есть еще много, просто ищите во всемирной паутине.

<сильный>4. Используйте CSS-хаки для определения конкретных браузеров:

Можно использовать так называемые CSS-хаки. Это специальные вызовы CSS, которые применяются только в определенных браузерах.

Некоторые примеры:

Internet Explorer/Edge 8 only: @media \0screen {}

firefox ≥ 3.6 only: @media screen and (-moz-images-in-menus:0) {}

Opera ≤ 9.27 AND Safari 2: html:first-child .selector {}

Вы можете найти больше Browserhacks здесь: http://browserhacks.com/

Вывод:

Можно определить определенные браузеры, но невозможно определить, поддерживает ли браузер данную функцию только с помощью CSS. Вот почему у вас всегда будут трудные времена с поддержкой браузера.

Надеюсь это поможет. С Уважением

Я считаю, что обнаружение анимации SMIL в modernizr должно сделать это. https://modernizr.com/download?smil-setclasses

Я использую его в довольно сложном наборе анимаций диаграмм css/SVG. Просто оберните запасной вариант в следующий тег:

.no-smil{    }

http://codepen.io/msbtterswrth/pen/greWzy

Я сделал не совсем то, что вы ищете, но что-то похожее (предоставление анимированного пути клипа, как определено SVG, когда браузер поддерживает его, и откат назад, когда это не так). Вы можете использовать медиа-запросы для поиска соотношений пикселей, чтобы определить, является ли браузер moz или webkit, и предоставить резервную анимацию вне медиа-запроса, а также предоставить предпочтительную анимацию в медиа-запросах, которые указывают браузер, который ее поддерживает.

//fallback animation here

@media (-webkit-min-device-pixel-ratio: 0) {
  // webkit animation here 
}

Что касается более старых версий Firefox? Я не знаю, как это сделать в CSS, но я не уверен, что возврат к более чем нескольким версиям Firefox или Chrome является распространенным вариантом использования.