ウェブポータルのためのインタラクティブなSVGマップの作成

Question

私はSVG形式のマップを持つWebポータルを作成し、対話性の可能性を保つために<object>タグを使用してHTMLコードに設定します。私の主な問題は、ブラウザでインタラクティブなSVG形式を作成してサポートする方法です。 SVGで直接

1. SMILアニメーション、
2. CSSアニメーション、
3. JavaScriptライブラリ：

   は、私の知る限り調査してきたように、いくつかのオプションがあります。

この最後のオプションが最も可能性が高いと思います。使用するライブラリ（Snap.svg、svg.js、Velocity.js、d3.js、jVectorMap.js、GreenSock ....）は数多くあります。 。

<script>タグを使用して直接SVG内で使用する必要がありますか、外部の.jsファイルを使用する必要がありますか？私の知る限り、jQueryはSVG内で直接使用することはできません。

Answer 1

実際、3つすべての変種は、多かれ少なかれ異なる長所と短所で動作します。

1. SMIL

SMILは、あなたのSVGの内部で使いやすいですし、直接あなたのSVGオブジェクトの属性を変更することができます。しかし、Internet ExplorerやEdgeをサポートしたい/したい場合は、多くの運がありません（CanIUse参照）。

Chrome 45は、CSSアニメーションとウェブアニメーションのためにSMILを推奨していません。しかし、Chrome開発者は最近、その意図を停止しました（this StackOverflow answer参照）。

2. CSSアニメーション

これらはSVGsのアニメーションのための優れた選択肢です。私が見た限りでは、実装は通常非常に高速で滑らかです。特にMicrosoftブラウザの場合はBrowser support is betterです。だから私は本当にそれをお勧めします。

さらに多くのユーザーとのやり取りが必要な場合は、すぐにCSSアニメーションの制限を受けます。インタラクションは可能ですが、もっと必要な場合はJavaScriptが必要です。

3. jQueryのは本当にSVGsとの深刻な問題を抱えているが、それはSVGsをサポートするならば、それはになるので、私はそれがより良いjQueryの（両方のために、jQueryとソフトウェア）なしでやっていると思う

JavaScriptライブラリは、さらに大きくて遅い。ただし、既にに jQueryが含まれている場合は、要素を選択してからjQueryを使用せずにアニメーション化することができます。

他のライブラリはSVGに特化していて、本当にうまく機能します（私は自分でd3.jsをうまく使いました）。

勧告

あなたは、Microsoftのブラウザをサポートする必要がない場合は、SMILが特定のアニメーションを定義するための簡単かつコンパクトな方法することができます。

これらのブラウザが必要な場合は、CSSアニメーションを試してみることをおすすめします。しかし、あまりにも静的に見える場合は、JavaScriptライブラリの1つが役に立ちます。