requiere - habilitar javascript en chrome en windows

¿Cómo se detecta soporte para VML o SVG en un navegador?

Question

Estoy escribiendo un poco de javascript y necesito elegir entre SVG o VML (o ambos, o algo más, es un mundo extraño). Aunque sé que por ahora solo IE es compatible con VML, prefiero detectar la funcionalidad que la plataforma.

SVG parece tener algunas propiedades que puede elegir: window.SVGAngle por ejemplo.

¿Es esta la mejor manera de verificar el soporte de SVG?

¿Hay algún equivalente para VML?

Desafortunadamente, en Firefox puedo hacer todo el renderizado en VML sin ningún error, simplemente no ocurre nada en la pantalla. Es bastante difícil detectar esa situación desde el script.

Answer 1

El control SVG no me funcionaba en Chrome, así que miré lo que hace la biblioteca Modernizer en su verificación ( https://github.com/Modernizr/Modernizr/blob/master/modernizr.js ).

Según su código, esto es lo que funcionó para mí:

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

Answer 2

Es posible que desee consultar http://www.modernizr.com/docs/#features-misc ya que contiene soporte para la detección real de la capacidad de SVG en lugar de la detección de agente de usuario que puede ser fácilmente corrompida.

Answer 3

La verificación SVG no funcionó en Chrome porque especifica la versión 1.0. Esto debería funcionar mejor:

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

Answer 4

Por otro lado ... Cuando desee saber antes de publicar la página: Revise esta página: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 Para el navegador / agente de usuario entrante. Descargo de responsabilidad: aún no he implementado esto. Como espero, caniuse.com publicará una API para trabajar.

MarkT

Answer 5

Puede omitir esto y utilizar una biblioteca JS que le permitirá hacer un dibujo vectorial de navegador cruzado, si esa es la intención. La biblioteca se encargará de esto, enviando a SVG si es compatible o de respaldo a canvas, VML, flash, silverlight, etc. de lo contrario, dependiendo de lo que esté disponible.

Ejemplos de bibliotecas que harán esto son, sin ningún orden en particular:

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

Answer 6

Sugeriría un ajuste a la respuesta de Crescentfresh: use

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

más bien que

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

para detectar SVG. Actualmente, WebKit es muy exigente con las funciones de informes, y devuelve falso para la feature#Shape pesar de contar con un soporte de SVG relativamente sólido. La feature#BasicStructure alternativa se sugiere en los comentarios a https://bugs.webkit.org/show_bug.cgi?id=17400 y me da las respuestas que esperaba en Firefox / Opera / Safari / Chrome (true) y IE (falso )

Tenga en cuenta que el enfoque implementation.hasFeature ignorará el soporte mediante complementos, por lo que si desea comprobar, por ejemplo, el complemento Adobe SVG Viewer para IE, deberá hacerlo por separado. Me imagino que lo mismo es cierto para el complemento RENESIS, pero no lo he comprobado.

Answer 7

Para la detección de VML, esto es lo que hace Google Maps (busque " 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
}

Veo lo que quiere decir con FF: permite crear elementos arbitrarios, incluidos los elementos vml ( <v:shape> ). Parece que es la prueba del atributo de adyacencia que puede determinar si el elemento creado se interpreta verdaderamente como un objeto vml.

Para la detección de SVG, esto funciona muy bien:

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

Answer 8

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

Funciona, si supone que los navegadores que no son SVG son IE5.5 o superior y pueden admitir VML. Probado en IE6, Firefox 8, Chrome 14.0.

Raphael es genial, pero no admite el concepto de grupos, que puede ser limitante en función de lo que esté haciendo. Sin embargo, Dmitry probablemente me llamará por decirlo.