브라우저에서 VML 또는 SVG에 대한 지원을 어떻게 감지합니까?

브라우저에서 VML 또는 SVG에 대한 지원을 어떻게 감지합니까?

---

나는 약간의 자바 스크립트를 작성 중이며 SVG 또는 VML (또는 둘 다 또는 다른 것, 이상한 세상) 중에서 선택해야합니다. 지금은 IE 만 VML을 지원한다는 것을 알고 있지만 플랫폼보다는 기능을 감지하는 편이 훨씬 낫습니다.

SVG에는 사용할 수있는 몇 가지 속성이있는 것으로 보입니다 : 예를 들어 window.SVGAngle.

이것이 SVG 지원을 확인하는 가장 좋은 방법입니까?

VML에 상응하는 것이 있습니까?

Unfortuntaly-firefox에서는 오류없이 VML의 모든 렌더링을 매우 행복하게 수행 할 수 있습니다. 화면에는 아무 일도 일어나지 않습니다. 스크립트에서 그 상황을 감지하는 것은 매우 어렵습니다.

---

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에 대한 의미를 알았습니다 <v:shape>. vml 요소 ( )를 포함하여 임의의 요소를 만들 수 있습니다 . 생성 된 요소가 실제로 vml 객체로 해석되는지 확인할 수 있는 인접 속성에 대한 테스트 인 것 같습니다 .

SVG 감지의 경우 다음과 같이 잘 작동합니다.

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

---

나는 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은 현재보고 기능에 대해 매우 까다 롭고 feature#Shape비교적 견고한 SVG 지원에도 불구하고 false를 반환합니다 . feature#BasicStructure대안에 대한 의견 제안 https://bugs.webkit.org/show_bug.cgi?id=17400 나에게 내가 파이어 폭스 / 오페라 / 사파리 / (참) 크롬과 IE (false)를 예상 답변을 제공합니다.

주의 implementation.hasFeature접근 방식은 당신이 별도로 그렇게해야 IE 용 Adobe SVG 뷰어 플러그인을 예를 확인하려면 그렇다면, 플러그인을 통해 지원을 무시합니다. RENESIS 플러그인에서도 마찬가지라고 생각하지만 확인하지 않았습니다.

---

Chrome에서 SVG 검사가 작동하지 않았기 때문에 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;
  }

---

이것을 건너 뛰고 브라우저 간 벡터 그리기를 할 수있는 JS 라이브러리를 사용하는 것이 좋습니다. 그런 다음 라이브러리는이를 처리하여 지원되는 경우 SVG로 출력하거나 사용 가능한 항목에 따라 캔버스, VML, 플래시, 실버 라이트 등으로 대체합니다.

이를 수행하는 라이브러리의 예는 특별한 순서가 없습니다.

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

---

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

비 SVG 브라우저가 IE5.5 이상이고 VML을 지원할 수 있다고 가정하면 작동합니다. IE6, Firefox 8, Chrome 14.0에서 테스트되었습니다.

Raphael은 매우 멋지지만 그룹의 개념을 지원하지 않으므로 수행하는 작업에 따라 제한 될 수 있습니다. 하지만 드미트리가 그렇게 말한 것에 대해 나를 화나게 할 것입니다.

---

http://www.modernizr.com/docs/#features-misc 는 쉽게 손상 될 수있는 사용자 에이전트 스니핑과 달리 SVG 기능의 실제 감지에 대한 지원을 포함 하고 있으므로 확인하는 것이 좋습니다.

---

SVG 검사는 버전 1.0을 지정하기 때문에 Chrome에서 작동하지 않았습니다. 이것은 더 잘 작동합니다.

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

---

반면에 ... 페이지를 제공하기 전에 알고 싶은 경우 :이 페이지를 긁어 냅니다 . http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 들어오는 브라우저 / 사용자 에이전트의 경우. 면책 조항 : 아직 구현하지 않았습니다. caniuse.com이 작업 할 API를 게시하기를 바라고 있습니다.

MarkT

참고 URL : https://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser