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

Я играю с элементами CSS -animated SVG и сталкивается с проблемой, что, несмотря на то, что все используемые технологии поддерживаются некоторыми браузерами, комбинация не является, т.е. CSS -animated DIV work, но SVG элементов нет. Мне интересно, есть ли способ определить, способен ли браузер анимировать элементы SVG, используя CSS.

Вот пример jsFiddle с примером. Он работает в последних версиях Chrome, Firefox и Safari. Но при открытии его, например, Firefox 5 только DIV вращается, а rect не работает.

Ответы

Ответ 1

Мне интересно, есть ли способ определить, способен ли браузер анимация элементов SVG с использованием CSS

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

Вы можете определить, поддерживает ли браузер CSS-функциональность только с 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. Проблема, с которой вы столкнулись, беспокоит каждого Webdeveloper. Тем не менее есть способы обойти эту проблему с поддержкой браузера:

1. Вы можете проверить "могу ли я использовать" для совместимости:

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

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

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

3. Пользователь 3rd - Партийные библиотеки:

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

Некоторые большие имена:

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

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

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

Можно использовать так называемые 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 {}

Вы можете посмотреть больше браузеров здесь: http://browserhacks.com/

Вывод:

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

Надеюсь, это поможет. Отношения

Ответ 2

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

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

.no-smil{    }

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

Ответ 3

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

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

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

Ответ 4

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

//fallback animation here

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

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