60

私は少しの JavaScript を書いていて、SVG か VML のどちらかを選択する必要があります (またはその両方か、それ以外の何か、それは奇妙な世界です)。今のところ IE だけが VML をサポートしていることはわかっていますが、プラットフォームよりも機能を検出したいと考えています。

SVG には、使用できるプロパティがいくつかあるようです。たとえば、window.SVGAngle です。

これは SVG サポートを確認する最良の方法ですか?

VML に相当するものはありますか?

残念ながら、firefox では、VML ですべてのレンダリングをエラーなく実行できます。画面上では何も起こりません。スクリプトからその状況を検出するのは非常に困難です。

4

8 に答える 8

56

私はクレセントフレッシュの答えを微調整することをお勧めします-使用

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 を返します。別の方法は、 https://bugs.webkit.org/show_bug.cgi?id=17400feature#BasicStructureへのコメントで提案されており、Firefox/Opera/Safari/Chrome (true) および IE (false) で期待した答えが得られます。

このimplementation.hasFeatureアプローチはプラグイン経由のサポートを無視することに注意してください。そのため、IE 用の Adob​​e SVG Viewer プラグインなどを確認したい場合は、個別に行う必要があります。RENESIS プラグインにも同じことが当てはまると思いますが、確認していません。

于 2009-04-01T17:30:28.110 に答える
47

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;
  }
于 2011-03-30T23:17:47.033 に答える
39

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 オブジェクトとして解釈されるかどうかを判断できるadjacency 属性のテストのようです。

SVG 検出の場合、これはうまく機能します。

function supportsSvg() {
    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")
}
于 2009-03-17T14:38:08.893 に答える
4

これをスキップして、クロスブラウザでのベクトル描画を可能にする JS ライブラリを使用することをお勧めします (それが意図されている場合)。ライブラリはこれを処理し、サポートされている場合は SVG に出力し、サポートされていない場合はキャンバス、VML、フラッシュ、Silverlight などにフォールバックします。

これを行うライブラリの例は、順不同です。

于 2010-01-27T01:55:38.690 に答える
3

http://www.modernizr.com/docs/#features-miscには、簡単に破損する可能性があるユーザー エージェント スニッフィングとは対照的に、SVG 機能の実際の検出のサポートが含まれているため、チェックすることをお勧めします。

于 2012-01-26T20:45:57.793 に答える
3 
var svgSupport = (window.SVGSVGElement) ? true : false;

SVG 以外のブラウザが IE5.5 以上で、VML をサポートできると仮定すると、機能します。IE6、Firefox 8、Chrome 14.0 でテスト済み。

Raphael は非常にクールですが、グループの概念をサポートしていないため、実行内容によっては制限を受ける可能性があります。しかし、ドミトリーはおそらくそう言ったことで私を非難するでしょう。

于 2011-11-18T06:06:00.103 に答える
1

一方... ページを提供する前に知りたい場合: このページをスクレイプします: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 着信ブラウザー/ユーザー エージェント用。免責事項：私はまだこれを実装していません。caniuse.com が連携する API を公開することを期待しています。

マークT

于 2012-01-09T06:36:42.457 に答える