Wie erkennen Sie Unterstützung für VML oder SVG in einem Browser

Question

Ich schreibe ein bisschen Javascript und muss zwischen SVG oder VML (oder beides oder etwas anderes, es ist eine seltsame Welt) wählen. Während ich weiß, dass im Moment nur IE VML unterstützt, würde ich eher Funktionalität als Plattform erkennen.

SVG scheint einige Eigenschaften zu haben, für die Sie sich entscheiden können: window.SVGAngle zum Beispiel.

Ist dies der beste Weg, um nach SVG-Unterstützung zu suchen?

Gibt es eine Entsprechung für VML?

Unfortuntaly - in Firefox kann ich durchaus das ganze Rendering in VML ohne Fehler tun - passiert einfach nichts auf dem Bildschirm. Es ist ziemlich schwierig, diese Situation anhand des Skripts zu erkennen.

Answer 1

Für VML-Erkennung, hier ist was google maps does (Suche nach "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 
} 

Ich sehe, was Sie über FF bedeuten: es erlaubt beliebige Elemente geschaffen werden, einschließlich VML-Elemente (<v:shape>). Es sieht so aus, als wäre es der Test für die adjacency attribute, der feststellen kann, ob das erstellte Element wirklich als ein vml-Objekt interpretiert wird.

Für SVG Erkennung funktioniert dies gut:

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

Answer 2

ich ein zwicken würde vorschlagen Antwort des crescentfresh - verwenden

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

statt

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

SVG zu erkennen. WebKit ist derzeit sehr wählerisch in Bezug auf Berichtsfunktionen und gibt für feature#Shape trotz relativ fester SVG-Unterstützung false zurück. Die Alternative feature#BasicStructure wird in den Kommentaren zu https://bugs.webkit.org/show_bug.cgi?id=17400 vorgeschlagen und gibt mir die Antworten, die ich in Firefox/Opera/Safari/Chrome (true) und IE (false) erwartet habe.

Beachten Sie, dass der implementation.hasFeature Ansatz Unterstützung über Plugins ignorieren wird, wenn Sie z. das Adobe SVG Viewer Plugin für IE müssen Sie das separat tun. Ich könnte mir vorstellen, dass das gleiche für das RENESIS Plugin gilt, aber nicht überprüft haben.

Answer 3

Sie können dies überspringen und verwenden Sie eine JS-Bibliothek, mit der Sie Vektor-Zeichen-Cross-Browser, wenn dies die Absicht ist. Die Bibliothek wird dann damit umgehen und, wenn unterstützt, auf SVG ausgeben oder fallback auf Canvas, VML, Flash, Silverlight usw., wenn nicht, je nachdem, was verfügbar ist.

Beispiele für Bibliotheken, die dies tun sind, in keiner bestimmten Reihenfolge:

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

Answer 4

Die SVG-Check für mich nicht in Chrome arbeiten, so dass ich sah, was die Modernisierer Bibliothek tut in ihrer Prüfung (https://github.com/Modernizr/Modernizr/blob/master/modernizr.js).

Basierend auf ihren Code, das ist was für mich gearbeitet:

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

Answer 5

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

Works, wenn Sie davon ausgehen, dass nicht-SVG-Browser IE 5.5 oder besser sind und VML unterstützt. Getestet auf IE6, Firefox 8, Chrome 14.0.

Raphael ist sehr cool, aber es unterstützt nicht das Konzept von Gruppen, die je nach dem, was Sie tun, einschränken können. Dmitry wird mich wahrscheinlich dafür flammen, dass ich das sage.

Answer 6

Auf der anderen Seite ... Wenn Sie wissen möchten, bevor Sie die Seite dienen: Scrape Diese Seite: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 Für den eingehenden Browser/User-Agent. Haftungsausschluss: Ich habe das noch nicht implementiert. Wie ich hoffe, Caniuse.com wird eine API veröffentlichen, mit zu arbeiten.

Märkt

Answer 7

Sie möchten http://www.modernizr.com/docs/#features-misc überprüfen, wie es Unterstützung für die eigentliche Erkennung von SVG-Fähigkeit enthält als Schnüffeln an User-Agent gegenüber, die leicht beschädigt werden können.

Answer 8

Der SVG-Check funktionierte in Chrome nicht, weil er Version 1.0 spezifiziert. Dies sollte besser funktionieren:

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