Jak wykryć obsługę VML lub SVG w przeglądarce

Question

Piszę trochę javascript i muszę wybrać między SVG lub VML (lub obu, lub coś innego, to dziwny świat). Chociaż wiem, że na razie tylko IE obsługuje VML, wolałbym raczej wykrywać funkcjonalność niż platformę.

Wygląda na to, że SVG ma kilka właściwości, na które można przejść: window.SVGAngle na przykład.

Czy to najlepszy sposób na sprawdzenie obsługi SVG?

Czy istnieje odpowiednik VML?

Unfortuntaly - w firefox mogę całkiem szczęśliwie zrobić wszystkie renderowania w VML bez błędu - po prostu nic nie dzieje się na ekranie. Trudno jest wykryć tę sytuację ze skryptu.

Answer 1

Do wykrywania VML, oto co google maps does (wyszukiwanie "function Xd"):

function supportsVml() { 
    if (typeof supportsVml.supported == "undefined") { 
     var a = document.body.appendChild(document.createElement('div')); 
     a.innerHTML = '<v:shape id="vml_flag1" adj="1" />'; 
     var b = a.firstChild; 
     b.style.behavior = "url(#default#VML)"; 
     supportsVml.supported = b ? typeof b.adj == "object": true; 
     a.parentNode.removeChild(a); 
    } 
    return supportsVml.supported 
} 

Rozumiem co masz na myśli o FF: umożliwia dowolne elementy mają być utworzone, w tym elementów VML (<v:shape>). Wygląda na to, że jest to test dla adjacency attribute, który może określić, czy utworzony element jest naprawdę interpretowany jako obiekt vml.

Do wykrywania SVG, to działa dobrze:

function supportsSvg() { 
    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0") 
} 

Answer 2

Sugeruję jeden uszczypnąć do crescentfresh na odpowiedź - używać

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") 

zamiast

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0") 

wykryć SVG. WebKit jest obecnie bardzo wrażliwy na funkcje raportowania i zwraca wartość false dla feature#Shape pomimo stosunkowo solidnej obsługi SVG. Opcja feature#BasicStructure jest sugerowana w komentarzach do https://bugs.webkit.org/show_bug.cgi?id=17400 i daje mi odpowiedzi, których oczekiwałem w Firefox/Opera/Safari/Chrome (true) i IE (false).

Należy pamiętać, że podejście implementation.hasFeature zignoruje obsługę za pomocą wtyczek, więc jeśli chcesz sprawdzić np. wtyczkę Adobe SVG Viewer dla IE musisz zrobić to osobno. Wyobrażam sobie, że to samo dotyczy wtyczki RENESIS, ale nie sprawdziłem.

Answer 3

Można pominąć tę opcję i skorzystać z biblioteki JS, która pozwoli na tworzenie grafiki wektorowej w różnych przeglądarkach, jeśli taka jest intencja. Biblioteka zajmie się tym, wysyłając do SVG, jeśli jest obsługiwana lub zastępuje płótno, VML, flash, silverlight, itp., Jeśli nie, w zależności od tego, co jest dostępne.

Przykłady bibliotek, które zrobi to są w przypadkowej kolejności:

• dojo.GFX (http://docs.dojocampus.org/dojox/gfx/)
• Raphaël (http://raphaeljs.com/)
• SVGWeb (http://code.google.com/p/svgweb/)

Answer 4

Kontrola SVG nie działa na mnie w Chrome, więc wyglądało na to, co robi biblioteka modernizatora w ich kontroli (https://github.com/Modernizr/Modernizr/blob/master/modernizr.js).

podstawie ich kodu, to co pracował dla mnie:

function supportsSVG() { 
    return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect; 
    } 

Answer 5

var svgSupport = (window.SVGSVGElement) ? true : false; 

Works, jeśli założymy, że przeglądarek innych niż SVG są IE5.5 lub lepiej i może obsługiwać VML. Testowany na IE6, Firefox 8, Chrome 14.0.

Raphael jest bardzo fajny, ale nie obsługuje koncepcji grup, które mogą ograniczać się w zależności od tego, co robisz. Dmitry prawdopodobnie mnie jednak za to powie.

Answer 6

Z drugiej strony ... Gdy chcesz wiedzieć, zanim służyć strony: Zeskrobać tej strony: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 Dla przychodzących agenta przeglądarki/użytkownika. Nota prawna: Jeszcze nie wdrożyłem tego. Mam nadzieję, że caniuse.com opublikuje api do pracy.

Markt

Answer 7

Możesz sprawdzić http://www.modernizr.com/docs/#features-misc ponieważ zawiera wsparcie dla rzeczywistej zdolności wykrywania SVG w przeciwieństwie do aplikacji klienckiej wąchania, które mogą być łatwo uszkodzone.

Answer 8

Kontrola SVG nie działała w Chrome, ponieważ określa wersję 1.0. To powinno działać lepiej:

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1")