Как вы обнаруживаете поддержку VML или SVG в браузере - PullRequest
Новая
       13

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

60 голосов
/ 17 марта 2009

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

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

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

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

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

Ответы [ 8 ]

56 голосов
/ 01 апреля 2009

Я бы предложил один твик для ответа 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, но не проверял.

47 голосов
/ 31 марта 2011

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

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

function supportsSVG() {
    return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect;
  }
39 голосов
/ 17 марта 2009

Для определения VML вот что Google Maps делает (поиск "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>). Похоже, что это тест для атрибута смежности , который может определить, действительно ли созданный элемент интерпретируется как объект vml.

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

function supportsSvg() {
    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")
}
4 голосов
/ 27 января 2010

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

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

3 голосов
/ 27 января 2012

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

3 голосов
/ 18 ноября 2011 
var svgSupport = (window.SVGSVGElement) ? true : false;

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

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

2 голосов
/ 13 июня 2013

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

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1")
1 голос
/ 09 января 2012

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

Markt

...