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

Question

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

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

Answer 1

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

//fallback animation here 

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

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

Answer 2

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

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

.no-smil{ } 

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

Answer 3

Я интересно, если есть способ, чтобы обнаружить, если браузер способен оживлённых элементы 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 в рабочий процесс:

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

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

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

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

• Угловой: https://angularjs.org/ (использование нг-Animate)
• JQuery: https://jquery.com/
• Greensock: https://greensock.com/

есть еще много, этого нужно просто искать по всему миру Интернет.

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 {} 

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

Вывод:

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

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

Answer 4

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

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

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