Làm thế nào để bạn phát hiện hỗ trợ cho VML hoặc SVG trong trình duyệt

Question

Tôi đang viết một chút javascript và cần phải chọn giữa SVG hoặc VML (hoặc cả hai, hoặc cái gì khác, đó là một thế giới kỳ lạ). Trong khi tôi biết rằng bây giờ chỉ có IE hỗ trợ VML, tôi muốn phát hiện khá nhiều chức năng hơn là nền tảng.

SVG dường như có một vài thuộc tính mà bạn có thể truy cập: window.SVGAngle chẳng hạn.

Đây có phải là cách tốt nhất để kiểm tra hỗ trợ SVG không?

Có tương đương với VML không?

Không may - trong firefox Tôi hoàn toàn có thể thực hiện tất cả việc hiển thị trong VML mà không gặp lỗi - không có gì xảy ra trên màn hình. Thật khó để phát hiện tình huống đó từ kịch bản.

Answer 1

Để phát hiện VML, đây là những gì google maps does (tìm kiếm cho "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 
} 

tôi xem những gì bạn có ý nghĩa về FF: nó cho phép yếu tố tùy ý được tạo ra, trong đó có yếu tố VML (<v:shape>). Có vẻ như đó là thử nghiệm cho adjacency attribute có thể xác định xem phần tử được tạo có thực sự được hiểu là đối tượng vml hay không.

Để phát hiện SVG, điều này hoạt động độc đáo:

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

Answer 2

tôi muốn đề nghị một tinh chỉnh để của crescentfresh câu trả lời - sử dụng

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

hơn

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

để phát hiện SVG. WebKit hiện rất kén chọn các tính năng báo cáo và trả về false cho feature#Shape mặc dù có hỗ trợ SVG tương đối vững chắc. Các thay thế feature#BasicStructure được đề xuất trong các ý kiến ​​để https://bugs.webkit.org/show_bug.cgi?id=17400 và mang lại cho tôi những câu trả lời tôi mong đợi trên Firefox/Opera/Safari/Chrome (đúng) và IE (sai).

Lưu ý rằng phương pháp implementation.hasFeature sẽ bỏ qua hỗ trợ qua plugin, vì vậy nếu bạn muốn kiểm tra ví dụ: plugin Adobe SVG Viewer cho IE, bạn sẽ cần phải làm điều đó một cách riêng biệt. Tôi tưởng tượng điều này cũng đúng với plugin RENESIS, nhưng chưa kiểm tra.

Answer 3

Bạn có thể muốn bỏ qua điều này và sử dụng thư viện JS cho phép bạn thực hiện vẽ vector chéo trình duyệt, nếu đó là ý định. Thư viện sau đó sẽ xử lý việc này, xuất ra SVG nếu được hỗ trợ hoặc dự phòng với canvas, VML, flash, silverlight, vv nếu không, tùy thuộc vào những gì có sẵn.

Ví dụ về các thư viện mà sẽ làm điều này là, không theo thứ tự đặc biệt:

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

Answer 4

Vui lòng cung SVG không làm việc cho tôi trong Chrome, vì vậy tôi nhìn vào những gì các thư viện hiện đại hóa không trong séc của họ (https://github.com/Modernizr/Modernizr/blob/master/modernizr.js).

Dựa trên mã của họ, đây là những gì làm việc cho tôi:

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

Answer 5

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

trình, nếu bạn cho rằng trình duyệt không phải là SVG IE5.5 hoặc tốt hơn và có thể hỗ trợ VML. Đã kiểm tra trên IE6, Firefox 8, Chrome 14.0.

Raphael rất tuyệt, nhưng nó không hỗ trợ khái niệm nhóm, có thể hạn chế tùy thuộc vào những gì bạn đang làm. Tuy nhiên, Dmitry có thể sẽ châm lửa tôi vì đã nói vậy.

Answer 6

Mặt khác ... Khi bạn muốn biết trước khi phục vụ trang: Cạo trang này: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 Đối với các đại lý trình duyệt/user đến. Tuyên bố từ chối trách nhiệm: Tôi chưa triển khai điều này. Như tôi hy vọng caniuse.com sẽ xuất bản một api để làm việc với.

Markt

Answer 7

Bạn có thể muốn kiểm tra http://www.modernizr.com/docs/#features-misc vì nó có chứa hỗ trợ để phát hiện thực tế của khả năng SVG như trái ngược với user-agent sniffing có thể dễ dàng bị hỏng.

Answer 8

Kiểm tra SVG không hoạt động trong Chrome vì nó chỉ định phiên bản 1.0. Điều này sẽ làm việc tốt hơn:

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