CSS-animasyonlu SVG için tarayıcı desteğini tespit edin.

Question

CSS - SVG elemanlarıyla oynuyorum ve kullanılan tüm teknolojiler bazı tarayıcılar tarafından desteklense bile, yani CSS -animated gibi problemlerle karşılaştım. DIV s iş ama SVG öğeleri yok. Bir tarayıcı CSS kullanarak SVG öğeleri animasyon yeteneğine sahip olup olmadığını tespit etmek için bir yol olup olmadığını merak ediyorum. Bir örnekle

Here is a jsFiddle. Chrome, Firefox ve Safari'nin en son sürümlerinde çalışır. Ancak, ör. Firefox 5 yalnızca div döner, rect ise dönmez.

Answer 1

Tam olarak aradığınız şeyi yapmadım, ancak benzer bir şey (tarayıcı desteklediğinde ve geri gelmediğinde geri döndüğünde SVG tarafından tanımlanan bir animasyonlu klip yolu sağlayarak). Bir çapraz noktanın moz veya webkit olup olmadığına karar vermek için piksel oranlarını arayan medya sorgularını kullanabilir ve geri dönüş animasyonu medya sorgusunun dışında sağlayabilir ve tercih edilen animasyonu, destekleyeceği bir tarayıcıyı gösteren medya sorgularında sağlayabilir.

//fallback animation here 

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

Eski Firefox sürümlerinde mi? Bunu CSS'de nasıl yapacağımı bilmiyorum, ancak Firefox veya Chrome'un birkaç sürümünden daha fazlasına geri döneceğinden emin değilim.

Answer 2

Modernizr'deki SMIL animasyonlarının tespitlerinin bunu yapması gerektiğine inanıyorum. https://modernizr.com/download?smil-setclasses

Çok css/SVG grafik animasyonları kümesinde kullanıyorum. Sadece şu etiketinde bir yedeği sarın: merak ediyorum

.no-smil{ } 

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

Answer 3

Bir tarayıcı CSS

kullanılarak animating SVG öğelerinin yeteneğinin olup olmadığını tespit etmek için bir yol olup olmadığını

Basit Yanıt: Evet, jhpratt.

Bir tarayıcının CSS-İşlevsellik özelliğini yalnızca CSS ile destekleyip desteklemediğini belirleyebilirsiniz. @supports CSS kuralları, bir veya daha fazla belirli CSS özelliği için tarayıcının desteğine bağlı olan bildirimleri belirtmenize izin verir. Buna özellik sorgusu denir.

Örnek:

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

MDN Bağlantı: https://developer.mozilla.org/de/docs/Web/CSS/@supports

Uzun Cevap:

Hep bir cross-browser sorunları olacak. Karşılaştığınız sorun, her Webdeveloper'ı rahatsız ediyor. Yine de, bu Tarayıcı-Destek-Sorun ile uğraşmanın yolları vardır:

1.Sen uyumluluk için "Ben kullanabilir" kontrol edebilirsiniz:

Bağlantı: Bu animasyonlar gibi sorgulanabilir herhangi bir işlevi bakmak için tavsiye olduğunu http://caniuse.com/ .

2. düğmelerini iş akışında bir autoprefixer: Eğer -moz-, -webkit- gibi bir önek ile CSS kullanımı hakkında çoğu zaman endişelenmenize gerek yok bir autoprefixer yardımıyla

vb. Bu minik yardımcınız sizin için hile yapacak, hatta desteklemek istediğiniz tarayıcılara bazı autoprefixer'lar bile anlatabilirsiniz.

3. Kullanıcı 3 - Parti kütüphaneler: Eğer tarayıcı ve sürümü algılamak için kullanabilirsiniz Orada birçok kütüphaneler vardır

. Animasyonunuzun kullanmak için güvenli olduğundan emin olmak istiyorsanız, sağlanan animasyonları kütüphanelerden kolayca kullanabilir ve elbette kendi web sitelerinde daha önce uyumluluğa bakabilirsiniz.

Bazı Big İsimler:

• Açısal: https://angularjs.org/ (kullanım ng-Animasyon)
• JQuery: https://jquery.com/
• GreenSock: https://greensock.com/

orada çok daha fazla olduğu, jsut dünyayı aramak geniş web.

4. CSS Hacks belirli Tarayıcılar algılamak için:

O sözde CSS-Hacks kullanmak mümkündür. Bunlar sadece belirli tarayıcılarda geçerli olan belirli CSS çağrılarıdır.

Bazı örnekler:

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

Burada daha Browserhacks bakabilirsiniz: http://browserhacks.com/

Sonuç:

Belirli tarayıcıları tespit etmek mümkündür, ancak bunu tespit etmek mümkün değildir brwoser verilen özelliği yalnızca CSS ile destekliyorsa. Bu yüzden tarayıcı desteği ile her zaman zor zamanlar geçireceksiniz.

Bu yardımcı olur umarım. Selamlar

Answer 4

Sen bir animasyon yineleme tamamlanması için kontrol etmek için bir olay dinleyicisi ekleyin ve karşılık gelen olay işleyicisi içinde (yineleme asla o tamamlar eğer animasyon değildir) supportsSVGKeyFramedAnimatedProps = true gibi bir bayrak ayarlayabilirsiniz.

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

Bu

bunun yerine bir yedeği sağlama, sizin SVG animasyon için 'ileri düşmek' olanak sağlayacak.