Rileva il supporto del browser per SVG animato

Question

Sto giocando con gli elementi CSS -animati SVG e ho riscontrato il problema che anche se tutte le tecnologie, che sono utilizzate, sono supportate da alcuni browser la combinazione non è, ovvero CSS -animated DIV s funzionano ma gli elementi SVG no. Mi chiedo se c'è un modo per rilevare se un browser è in grado di animare gli elementi SVG utilizzando CSS.

Here is a jsFiddle con un esempio. Funziona nelle ultime versioni di Chrome, Firefox e Safari. Ma aprendolo con ad es. Firefox 5 ruota solo con lo div mentre lo rect non lo fa.

Answer 1

Non ho fatto esattamente quello che stavi cercando, ma qualcosa di simile (fornendo un percorso di clip animato come definito da SVG quando il browser lo supporta e si riduce quando non lo fa). È possibile utilizzare le media query in cerca di rapporti pixel per determinare se un broswer è moz o webkit e fornire l'animazione di fallback al di fuori della query multimediale e fornire l'animazione preferita nelle query multimediali che indicano un browser che la supporterà.

//fallback animation here 

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

Per quanto riguarda le versioni precedenti di Firefox? Non so come farlo in CSS, ma non sono sicuro di tornare più di alcune versioni di Firefox o Chrome è un caso di uso comune.

Answer 2

Credo che le rilevazioni di animazioni SMIL in modernizr dovrebbero farlo. https://modernizr.com/download?smil-setclasses

Lo sto utilizzando in un insieme piuttosto impegnativo di animazioni di grafici CSS/SVG. Basta avvolgere un ripiego nel seguente tag:

.no-smil{ } 

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

Answer 3

Mi chiedo se c'è un modo per rilevare se un browser è in grado di elementi SVG Animating usando i CSS

Risposta semplice: Sì, come indicato da @jhpratt.

È possibile rilevare se un browser supporta la funzionalità CSS con solo CSS. La regola at-rule @supports consente di specificare dichiarazioni che dipendono dal supporto di un browser per una o più funzionalità CSS specifiche. Questa è chiamata query di funzionalità.

Esempio:

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

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

lungo Risposta:

si avrà sempre alcuni cross-browser problemi. Il problema riscontrato è disturbare ogni sviluppatore Web. Esistono ancora modi per aggirare questo problema di supporto del browser:

1.È possibile controllare "posso usare" per la compatibilità:

Link: http://caniuse.com/ Si raccomanda di cercare qualsiasi funzionalità che è discutibile come le animazioni.

2. Utilizzare un autoprefixer nel vostro flusso di lavoro:

Con l'aiuto di un autoprefixer che non ci si deve preoccupare la maggior parte del tempo su come utilizzare i CSS con un prefisso come -moz-, -webkit- ecc. Questo piccolo aiutante farà il trucco per te, puoi persino dire ad alcuni autoprefixers quali browser vuoi supportare.

3. 3 ° utente - librerie di partito:

Ci sono molte librerie là fuori che è possibile utilizzare per rilevare il browser e la versione. Se vuoi essere sicuro che la tua animazione sia sicura da usare, puoi semplicemente usare l'animazione fornita dalle librerie e ovviamente guardare la compatibilità prima sui rispettivi siti web.

alcuni grandi nomi:

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

ci sono molti di più, sono finite Ricerca nel Mondo ampia rete.

4. Usare CSS Hacks per rilevare browser specifici:

E 'possibile utilizzare i cosiddetti CSS Hacks. Sono chiamate CSS specifiche, che si applicano solo su determinati browser.

Alcuni esempi:

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

È possibile cercare più Browserhacks qui: http://browserhacks.com/

Conclusione:

E 'possibile rilevare browser specifici, ma non è possibile rilevare se il brwoser supporta la funzione data con solo CSS. Questo è il motivo per cui avrai sempre dei momenti difficili con il supporto del browser.

Spero che questo aiuti. Saluti

Answer 4

È possibile aggiungere un listener di eventi per verificare il completamento di un'iterazione di animazione, e all'interno del gestore di eventi corrispondente impostare un flag come supportsSVGKeyFramedAnimatedProps = true (se l'iterazione non completa mai allora non è animando).

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

questo permetterebbe di 'cadere in avanti' per l'animazione in formato SVG, invece di fornire un ripiego.