2011-12-09 7 views
1

ブラウザで表示されるJavaScriptのSVGライブラリは、の既定値 SVGの画像を表示することができます。SVGファイルを扱うためのクロスブラウザソリューション?

私はこれらのライブラリを知っている:

  • Raphaël:私は現在、SVGの読み込みプラグインと一緒にこれを使用しています。しかし、このプラグインは、InkscapeやAdobe Illustrator SVG(ほとんどのSVG)をサポートしていません。
  • cang:このライブラリは有望ですが、IEにネイティブではない<canvas>のサポートが必要です。
  • svgweb:もうひとつ有望なライブラリです。それはフラッシュが必要ですが、ほとんどのIEユーザーはFlashを持っています。
  • jQuery SVG:SVGイメージを読み込めるようですが、開発は終了したようです。 jQuery 1.3の修正版を使用する必要があります。

私は基本的に任意の画像のチャンクを「選択可能」にしようとしています。

ご協力いただければ幸いです。

答えて

3

Raphaëlthis great pluginを使用したIllustrator SVGのインポートをサポートしています。あなたは、aiファイルをSVGとして保存し、テキストエディタを使用して開き、コードをコピーしてプラグインでインポートするだけです。偉大な作品: "パス"オブジェクト、テキスト、勾配、影なしをサポートします。

+0

私は実際に今使っています。悲しいことに、うまく動作せず、エクスポートされたIllustratorイメージではかなりうまく機能しません(実際の形状の代わりに黒い四角形が表示されます)。 – Blender

+0

複雑なSVGファイルには制限があります。あなたは使用しているSVGファイルを投稿できますか? – Choy

+0

問題は、SVGファイルの最初の2つの要素にあります。これは、rect項目です。プラグインはパスのみをサポートしています。それらを削除すると、動作します。 – Choy

0

あなたができることはcangとsvgwebのコンボを使用することです。ブラウザがキャンバスを許可しているかどうかを確認し、そうであればcangを読み込んで使用します。それ以外の場合はフラッシュがあるかどうかを確認し、そうであればsvgwebを使用します。どちらも持っていない場合は、ブラウザをアップグレードするように指示します。

javacriptの機能の検出が不明な場合は、を読むことができます。

+0

私はこれを悲しいことにしなければならないかもしれません。しかし、2つのライブラリを扱うために大量のコードを書き直すことには本当に興奮しているわけではありませんが、それがあれば、それをやらなければなりません。 – Blender

0

Google Chrome Frame(IEプラグイン)を使用するように誘惑されます。これにより、2つのコードセット(IEユーザーの場合は1つ、通常のブラウザユーザーの場合)が保守されます。 (GCF経由で)あなたのページに次のメタタグを追加するIEでレンダリングするSVGを可能にします:

<meta http-equiv="X-UA-Compatible" content="chrome=1"> 

See here検出、および潜在的にGCFをインストールするようユーザーに促す方法を説明するために。

+0

私はGCFについて考えましたが、IEユーザーにインストールするのは難しいでしょう。私はすぐに使えるものを好むだろう。 – Blender

0

Raphaelをthis toolと一緒に使って、私の場合はIllustratorで生成されたSVGファイルをほぼそのままRaphaelコードに変換できます。そしてRaphaelはIE6 +なので、あなたは簡単に自分の努力をしていたかもしれません。

Hereは、これらの2つのものを組み合わせて実現できるものの例です。

関連する問題