web-dev-qa-db-fra.com

Comment détectez-vous la prise en charge de VML ou SVG dans un navigateur

J'écris un peu de javascript et je dois choisir entre SVG ou VML (ou les deux, ou autre chose, c'est un monde étrange). Bien que je sache que pour l'instant que seul IE prend en charge VML, je préfère de loin détecter les fonctionnalités plutôt que la plate-forme.

SVG semble avoir quelques propriétés que vous pouvez choisir: window.SVGAngle par exemple.

Est-ce la meilleure façon de vérifier le support SVG?

Existe-t-il un équivalent pour VML?

Malheureusement - dans Firefox, je peux très bien faire tout le rendu en VML sans erreur - rien ne se passe à l'écran. Il est assez difficile de détecter cette situation à partir du script.

javascriptinternet-explorersvgbrowser-detectionvml
60
Jim T

Pour la détection de VML, voici ce que google maps le fait (recherchez "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
}

Je vois ce que vous voulez dire sur FF: il permet de créer des éléments arbitraires, y compris des éléments vml (<v:shape>). Il semble que ce soit le test de attribut de contiguïté qui peut déterminer si l'élément créé est vraiment interprété comme un objet vml.

Pour la détection SVG, cela fonctionne bien:

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

Je suggérerais un Tweak à la réponse de crescentfresh - utilisez

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

plutôt que

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

pour détecter SVG. WebKit est actuellement très pointilleux sur les fonctionnalités de génération de rapports et renvoie false pour feature#Shape malgré un support SVG relativement solide. Le feature#BasicStructure une alternative est suggérée dans les commentaires pour https://bugs.webkit.org/show_bug.cgi?id=174 et me donne les réponses que j'attendais sur Firefox/Opera/Safari/Chrome (true ) et IE (false).

Notez que le implementation.hasFeature l'approche ignorera le support via les plugins, donc si vous voulez vérifier par exemple le plugin Adobe SVG Viewer pour IE vous devrez le faire séparément. J'imagine que c'est la même chose pour le plugin RENESIS, mais je n'ai pas vérifié.

56
mrec

La vérification SVG ne fonctionnait pas pour moi dans Chrome, j'ai donc examiné ce que fait la bibliothèque Modernizer dans leur vérification ( https://github.com/Modernizr/Modernizr/blob/master/modernizr.js =).

Sur la base de leur code, c'est ce qui a fonctionné pour moi:

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

Vous voudrez peut-être ignorer cela et utiliser une bibliothèque JS qui vous permettra de faire un dessin croisé vectoriel, si c'est l'intention. La bibliothèque s'en chargera ensuite, en sortie vers SVG si elle est prise en charge ou en repli sur canvas, VML, flash, silverlight, etc. sinon, selon ce qui est disponible.

Des exemples de bibliothèques qui le feront sont, sans ordre particulier:

4
Duncan Lock

Vous voudrez peut-être vérifier http://www.modernizr.com/docs/#features-misc car il contient un support pour la détection réelle de la capacité SVG par opposition au reniflement d'agent utilisateur qui peut être facilement corrompu.

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

Fonctionne, si vous supposez que les navigateurs non SVG sont IE5.5 ou mieux et peuvent prendre en charge VML. Testé sur IE6, Firefox 8, Chrome 14.0.

Raphael est très cool, mais il ne supporte pas le concept de groupes, ce qui peut être limitatif selon ce que vous faites. Dmitry va probablement me flasher pour l'avoir dit, cependant.

3
Keith McConnell

Le SVG-check ne fonctionnait pas dans Chrome car il spécifie la version 1.0. Cela devrait mieux fonctionner:

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

D'un autre côté ... Quand vous voulez savoir avant de servir la page: Grattez cette page: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 Pour le navigateur entrant/agent utilisateur. Avertissement: je ne l'ai pas encore implémenté. Comme j'espère que caniuse.com publiera une api avec laquelle travailler.

MarkT

1
MarkT