css - online - el svg no puede animarse

Detecta compatibilidad con el navegador para SVG animado por CSS

Question

Estoy jugando con CSS -animated SVG elements y encontré el problema de que aunque todas las tecnologías, que se usan, son compatibles con algunos navegadores, la combinación no es, es decir, CSS trabajo de DIV estimulado por CSS pero los elementos de SVG no lo hacen. Me pregunto si hay una manera de detectar si un navegador es capaz de animar elementos SVG usando CSS .

Aquí hay un jsFiddle con un ejemplo. Funciona en las últimas versiones de Chrome, Firefox y Safari. Pero cuando se abre con, por ejemplo, Firefox 5, solo el div rota mientras que el rect no.

Answer 1

Me pregunto si hay una forma de detectar si un navegador es capaz de animar elementos SVG usando CSS

Respuesta simple: Sí, puedes según lo establecido por @jhpratt.

Puede detectar si un navegador admite CSS-Funcionalidad con solo CSS. El @supports CSS at-rule le permite especificar declaraciones que dependen del soporte de un navegador para una o más funciones CSS específicas. Esto se llama una consulta de características.

Ejemplo:

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

Enlace MDN: https://developer.mozilla.org/de/docs/Web/CSS/@supports

Respuesta larga:

Siempre tendrá algunos problemas entre cross-browser . El problema que ha encontrado es molestar a cada desarrollador web. Todavía hay formas de moverse con este problema de soporte del navegador:

1. Puede verificar "puedo usar" para la compatibilidad:

Enlace: http://caniuse.com/ Se recomienda buscar cualquier funcionalidad que sea cuestionable como las animaciones.

2. Use un autoprefixer en su flujo de trabajo:

Con la ayuda de un autoprefixer, no tienes que preocuparte la mayor parte del tiempo por usar CSS con un prefijo como -moz-, -webkit-, etc. Este pequeño ayudante te servirá, incluso puedes contarle a algunos autoprefixers qué navegadores quieres admitir.

3. Bibliotecas de terceros de usuarios:

Existen muchas bibliotecas que puedes usar para detectar el navegador y la versión. Si desea asegurarse de que su animación sea segura, simplemente use la animación provista por las bibliotecas y, por supuesto, mire la compatibilidad antes en sus respectivos sitios web.

Algunos grandes nombres:

• Angular: https://angularjs.org/ (use ng-Animate)
• JQuery: https://jquery.com/
• Greensock: https://greensock.com/

hay muchos más, jsut busca en la world wide web.

4. Use CSS Hacks para detectar navegadores específicos:

Es posible usar los llamados CSS-Hacks. Son llamadas CSS específicas, que solo se aplican en ciertos navegadores.

Algunos ejemplos:

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

Puede buscar más Browserhacks aquí: http://browserhacks.com/

Conclusión:

Es posible detectar navegadores específicos, pero no es posible detectar si el brwoser admite la función dada con solo CSS. Es por eso que siempre tendrá algunos momentos difíciles con el soporte del navegador.

Espero que esto ayude. Saludos

Answer 2

Creo que las detecciones de animaciones SMIL en modernizr deberían hacerlo. https://modernizr.com/download?smil-setclasses

Lo estoy usando en un conjunto bastante complicado de animaciones de gráficos css / SVG. Solo envuelva un respaldo en la siguiente etiqueta:

.no-smil{    }

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

Answer 3

No he hecho exactamente lo que está buscando, sino algo similar (que proporciona una ruta de clip animada tal como lo define SVG cuando el navegador lo admite y retrocede cuando no lo hace). Puede usar consultas de medios buscando proporciones de píxeles para determinar si un generador de errores es moz o webkit y proporcionar la animación alternativa fuera de la consulta de medios y proporcionar la animación preferida en consultas de medios que indiquen un navegador que la respalde.

//fallback animation here

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

En cuanto a las versiones anteriores de Firefox? No sé cómo hacer eso en CSS, pero no estoy seguro de que vaya más allá de algunas versiones de Firefox o Chrome. Es un caso de uso común.

Answer 4

Puede agregar un detector de eventos para verificar la finalización de una iteración de animación, y dentro del controlador de eventos correspondiente establecer un indicador como supportsSVGKeyFramedAnimatedProps = true (si la iteración nunca se completa, entonces no se está animando).

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

Esto le permitiría ''caer hacia adelante'' a su animación SVG, en lugar de proporcionar un repliegue.