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

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

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

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

Существует ли какой-либо эквивалент для VML?

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

Ответы

Ответ 1

Для обнаружения VML, здесь карты google (поиск "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")
}

Ответ 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, но не проверено.

Ответ 3

Проверка 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;
  }

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Markt