Как обнаружить поддержку VML или SVG в браузере

Question

Я пишу немного javascript и вам нужно выбирать между SVG или VML (или обоими, или что-то еще, это странный мир). Пока я знаю, что пока только IE поддерживает VML, я бы скорее обнаружил функциональность, чем платформа.

У SVG похоже несколько свойств, которые вы можете использовать для: window.SVGAngle например.

Это лучший способ проверить поддержку SVG?

Есть ли эквивалент для VML?

Unfortuntaly - в firefox Я могу с радостью сделать всю визуализацию в VML без ошибок - на экране ничего не происходит. Трудно обнаружить эту ситуацию из сценария.

Answer 1

Для обнаружения VML, вот что google maps does (поиск "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 
} 

Я понимаю, что вы имеете в виду о FF: это позволяет произвольные элементы должны быть созданы, в том числе элементы VML (<v:shape>). Похоже, это тест для adjacency attribute, который может определить, действительно ли созданный элемент интерпретируется как объект vml.

Для обнаружения SVG, это хорошо работает:

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

Answer 2

Я хотел бы предложить один твик, чтобы crescentfresh ответ - использовать

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

вместо

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

обнаружить SVG. WebKit в настоящее время очень разборчиво относится к функциям отчетности и возвращает false для feature#Shape, несмотря на относительно прочную поддержку SVG. Вариант feature#BasicStructure предлагается в комментариях к https://bugs.webkit.org/show_bug.cgi?id=17400 и дает ответы, которые я ожидал от Firefox/Opera/Safari/Chrome (true) и IE (false).

Обратите внимание, что подход implementation.hasFeature будет игнорировать поддержку через плагины, поэтому, если вы хотите проверить, например, плагин Adobe SVG Viewer для IE вам нужно будет сделать это отдельно. Я предполагаю, что то же самое верно для плагина RENESIS, но не проверено.

Answer 3

Возможно, вам захочется пропустить это и использовать библиотеку JS, которая позволит вам делать векторный рисунок кросс-браузера, если это намерение. Затем библиотека будет обрабатывать это, выводя на SVG, если он поддерживается или возвращается на холст, VML, flash, silverlight и т. Д., Если нет, в зависимости от того, что доступно.

Примеры библиотек, которые будут делать это, в случайном порядке:

• додзё.GFX (http://docs.dojocampus.org/dojox/gfx/)
• Рафаель (http://raphaeljs.com/)
• SVGWeb (http://code.google.com/p/svgweb/)

Answer 4

Проверка SVG не работает для меня в Chrome, так что я посмотрел на то, что делает библиотека Модернизатор в их чеках (https://github.com/Modernizr/Modernizr/blob/master/modernizr.js).

на основе их кода, это то, что работает для меня:

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

Answer 5

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

Works, если предположить, что не-SVG-браузеры IE5.5 или лучше и может поддерживать VML. Протестировано на IE6, Firefox 8, Chrome 14.0.

Рафаэль очень классный, но он не поддерживает концепцию групп, которая может быть ограничена в зависимости от того, что вы делаете. Возможно, Дмитрий плачет мне за это.

Answer 6

С другой стороны ... Если вы хотите знать, прежде чем вы служите страницу: царапать эту страницу: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 Для входящего агента браузера/пользователя. Отказ от ответственности: Я еще не реализовал это. Как я надеюсь, caniuse.com опубликует api для работы.

Markt

Answer 7

Вы можете проверить http://www.modernizr.com/docs/#features-misc, поскольку она содержит поддержку фактического обнаружения возможности SVG, в отличие от агента пользователя нюхают, которые могут быть легко повреждены.

Answer 8

SVG-check не работал в Chrome, поскольку он указывает версию 1.0. Это должно работать лучше:

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