snap.svgへの紹介

キーテイクアウト

• snap.svgは、マスキング、クリッピング、パターン、グラデーションなどの機能を提供するスケーラブルベクトルグラフィックス（SVG）を使用するために特別に設計された強力で柔軟なライブラリです。
snap.svgを使用すると、開発者は既存のSVGコンテンツとsnap.svgで生成されたSVGコンテンツの両方をアニメーション化および操作でき、すべての最新のブラウザーと互換性があります。
• snap.svgは低レベルのライブラリであり、チャートやデータバインディングをまだサポートしていませんが、複雑なアニメーションとインタラクティブなSVGコンテンツの作成に最適です。
SVG要素はsnap.svgでグループ化できるため、グループ内のすべての要素により一般的な変換とイベント処理をより簡単に適用できます。
• snap.svgは、勾配、パターン、クリッピングパスなどのほとんどのSVG機能をサポートし、すべての最新のブラウザーと互換性があります。ただし、一部のSVG機能は、古いブラウザでは完全にはサポートされていない場合があります。
snap.svgは、見ようとしているように、マスキング、クリッピング、パターン、勾配などの最新のSVG機能を提供します。

PATHSJSは、SVGベースのチャート作成の最小限のライブラリです。テンプレートエンジンで使用できるSVGパスを生成することにより、リアクティブプログラミングをサポートするように設計されています。 Ractiveなどの口ひげベースのテンプレートエンジンで最適に機能します。

ラファエルを見る機会がなかったら、おそらくそうすべきです。 Dmitry Baranovskiyのソロプロジェクトとして作成されたJavaScriptの素晴らしい作品です。個人的なプロジェクトとして始まりましたが、結果はインターフェイス（非常に明確で一貫した）、パフォーマンス、および外観（特にアニメーション）で顕著です。ライブラリは、チャートではなく「フリーハンド」の図面とアニメーションに向けられています。 Graphaël拡張機能は後にこれに対処するためにリリースされましたが、D3ほど人気が​​なく、広く普及していません。

他の図書館よりも先を行っているにもかかわらず、ラファエルはその限界を示し始めました。たとえば、古いブラウザと互換性を持つために、Raphaëlはあなたのアニメーションを際立たせるクールな新しいSVG機能をすべてサポートしていません。 そのため、著者は新しいプロジェクトであるSnap.svgから新たに始めることを決めたのです。これはもちろん、Raphaëlを設計した経験から利益を得ることができます。 snap.svgも過去と壊れ、まったく新しい種類の特殊効果を導入できます。

ああ、スナップ！

長所：

上記のすべてのクールな機能をサポートしています。

SNAPは、既存のSVGを包み込み、アニメーション化できます。 Adobe Illustrator、Inkscape、Sketch、またはSVGの文字列を非同期にロードして、SVGファイルをスプライトに変えるために必要なピースをクエリして、SVGを生成できます。

無料でオープンソースです。

cons：
• それは低レベルのライブラリなので、データを視覚化する必要がある場合、残念ながらチャートのサポートはまだありません。
データバインディングのサポートはありません。

Snapは、まだ完全な成熟に達していない若いプロジェクトです。あなたの個人的なプロジェクトに使用することはすでに素晴らしいことですが、複雑なプロジェクトで使用する前にこの側面を重み付けする必要があります。

私たちが述べたように、Snapは古いブラウザではサポートされていない機能を使用します。完全な、更新された互換性テーブルはまだ提供されていませんが、このライブラリは少なくとも次のブラウザバージョン（および新しい）で正常に動作するはずです：
• firefox esr 18
• ie 9.0.8

Chrome 29

オペラ24

スナップ
• を開始します
GitHubリポジトリからソースファイルをダウンロードした後、それらを解凍して、構築された配布ファイルを含むDISTフォルダーを探すことができます。グラントでスナップの構築に関する詳細な手順、または最新バージョンをチェックするには、こちらをご覧ください。
• 新しいプロジェクトのJSフォルダー内のファイルのミニ型バージョンをコピーしたら、HTMLページにスクリプトを含めてください。プロジェクトのルートディレクトリにあると仮定すると、ページの閉じたボディタグの直前にこの行を追加できます。
• これで、ベクターグラフィック用の図面領域を作成する準備ができました。これを行うには、2つの方法があります
  • ページのDOMに追加される真新しい図面を作成します（ボディの内側）。
  既存のDOM要素を再利用し、スナップ構造に包みます。任意の要素をラップすることはできますが、メソッドを描画するには、SVG要素が必要になります。
  最初の方法では、JavaScriptコードの作成時に表面積の幅と高さを明示的に設定できます。プレゼンテーションとコンテンツをより多くのレベルの分離を達成したい場合は、2番目の方法を使用して、CSSルールの値を指定できます。高レベルでは、最初の方法では、図面の外観を動的に調整できますが、必要でない場合は、2番目の方法はMVCに準拠しています。さらに、導入セクションで述べたように、ラッピングは外部ツールで作成されたSVG図面をインポートおよび変更できるものです。
  たとえば、新しい800 x 600ピクセルの描画エリアを作成するには、次のJavaScriptの行が必要です。
  代わりに、既存のものをラップしたい場合は、#complexsvgfromillustrator：

  <span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

  javascriptの単一の行でまだ逃げることができ、図面をインポートすることができます。
  サイドノート：好奇心の強い読者の場合：作成後にスナップオブジェクトを検査すると、ラファエルの遺産を証言している紙のフィールドがあることに気付くでしょう。

  <span>var s = <span>Snap</span>(800, 600);</span>

  shapes
  描画表面であるスナップラッパーを作成したら、その上にいくつかの形を描く時が来ました。サークルを描きたいとしましょう：

  <span><span><span><svg> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></svg></span>
  </span>  ...
  <span><span><span></span></span></span></span>

>

ドキュメントからわかるように、円（）メソッドの最初の2つのパラメーターはその中心の座標であり、3つ目は円の半径です。これらのすべてのパラメーターは必須であり、それらを提供しないとエラーがスローされます。 Circle（）メソッドは、他のすべての描画メソッドと同様に、オブジェクトへの参照を返します。 次のコードサンプルに示すように、

楕円を描くこともできます。今回は垂直および水平半径が必要です。繰り返しますが、すべてのパラメーターは必須です

長方形を描画したい場合は、次のコードを使用します。これにより、左上コーナー（100px、100px）、200pxの幅、200pxの高さを備えた長方形が作成されます。

rect（）メソッドのクールなことは、垂直軸と水平軸に対して独立して丸い角の半径を制御する2つのオプションパラメーターも受け入れることです。これらのパラメーターは、渡されないときにデフォルトで0になりますが、1つ（水平半径）のみを通過する場合、2番目のパラメーターはゼロに設定されないが、代わりに両方が同じ値を想定することに注意してください。

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

今、ゼロから始めたい場合は、別の描画面を作成するか、紙からすべての図面を消去するためにPaper.clear（）メソッドを使用することもできます。

線とポリゴン

より複雑な図面をカバーするには、一歩後退し、線を引くことについて話す必要があります。あなたが期待するように、この方法は、以下に示すように、ラインのエンドポイントの4つの座標を取得します。

<span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

もっと興味深いのは、複雑なポリラインを描く可能性です。VARline = Paper.Polyline（10、100、110、200）。原則として、上記のLine（）メソッドに相当しますが、おそらくその視覚的な結果に驚くでしょう。その理由を確認するには、これを試してみましょう

<span>var s = <span>Snap</span>(800, 600);</span>

Paper.Polyline（）およびPaper.Polygon（）は同じ方法のエイリアスであり、デフォルトでは、結果として得られた（閉じた）ポリゴンは、黒い塗りつぶしで描かれ、ストロークがありません。そのため、上記のpolyline（）で描かれた線を見ることができませんでした（ただし、ページを検査することで、SVGコードが実際にコンテナに追加されていることを確認できます）。 この動作を変更するだけでなく、他の要素の外観を変更するには、属性を導入する必要があります。

属性

SNAP要素の属性の概念は通常よりもやや広くなっています。つまり、同じインターフェイスの下にあるHTML属性とCSS属性の両方が含まれています（他のほとんどのライブラリは、HTML属性の.attr（）メソッドを区別します。 style（） 'for cssのもの）。スナップラッパーオブジェクトでelement.attr（）メソッドを使用することにより、クラスまたはID、および色または幅を設定できます。 上記のように、

SNAPを使用すると、CSSプロパティを要素に割り当てる2つの方法があります。 1つは、これらのプロパティを別のCSSファイルに含めることで、適切なクラスを要素に割り当てることです。

JavaScriptを使用してこれらのプロパティを割り当てることで同じ結果を取得できます。

もう一度、もう一度、最初の方法では、コンテンツとプレゼンテーションをよりよく分離することができますが、2番目の方法では属性を動的に変更する可能性が提供されます。 2つの戦略を混合することを考えている場合、CSSファイルで定義されているルールは、要素に割り当てられる時間的順序にもかかわらず、element.attr（）で割り当てるルールを切り替えることに留意してください。

スタイルを整えたい要素への参照を維持していない場合は、心配しないでください。CSSセレクターを使用して簡単につかむことができます：

<span><span><span><svg> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></svg></span>
</span>  ...
<span><span><span></span>></span></span></span>

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

グループ

SVG要素をグループ化できるように、グループ内のすべての要素により一般的な変換とイベント処理をより簡単に適用できるようにします。グループを作成するのは簡単です：

<span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
</span>    circle <span>= paper.circle(100, 50, 10);</span>

注意してください：注文または議論が重要です！第二に、要素をグループに割り当てると、既に属する可能性のあるグループから削除されます。 もちろん、要素は、既存のグループが作成された後にも追加できます。

画像

<span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

SNAPは、SVG要素内のネストラスター画像をサポートし、非同期にロードし、負荷完了時にのみ表示します。

<span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

結果のオブジェクトは、SVG要素として扱うことができます。注意して、後でそれらを取得するために画像でselect（）を使用する場合、作成されたラッパーはHTML要素のものになります。したがって、SVG要素で使用できるほとんどの方法はサポートされません。

変換

楕円や長方形のような非対称ポリゴンを描く方法を見てきました。ただし、基本的な方法では、デカルト軸に合わせたこれらの図を描くように制限されます。 x-y軸に対して軸が45°回転している楕円を描きたい場合はどうなりますか？作成方法でこれを指定することはできませんが、変換を使用して同じ結果を得ることができます。

同様に、画像を回転させるか、作成後のある時点で要素（またはグループ）を移動する必要がある場合があります。 Transform（）メソッドは、SVG変換文字列を渡すことにより、それを行うことができます：

このメソッドは、文字列またはオブジェクトを入力として使用できます。また、要素に関連付けられた変換マトリックスを使用して、同じ変換を別の要素に適用することもできます。

<span>var s = <span>Snap</span>(800, 600);</span>

注意してください：2番目の要素の変換の中心は、最初の要素に使用されるものであるため、最終的な効果はあなたを驚かせるかもしれません。

Transform（）メソッドを使用して、呼び出される要素の変換記述子オブジェクトを取得することもできます。引数なしで呼び出すだけです。この記述子は、ネストされた要素の場合に局所変換マトリックスと差マトリックスを取得するために使用できます。

<span><span><span><svg> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></svg></span>
</span>  ...
<span><span><span></span>></span></span></span>

結論

この記事は、snap.svgの基本の紹介を提供しました。あなたが最もクールなものを見ることに興味があるなら、高度なフォローアップがまもなく公開されるので、お楽しみに。

データの視覚化とスナップの詳細を知りたい場合は、いくつかの有用なリソースを紹介します。

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

snap.svgチュートリアル。

データビジュアル化と高度なテクニックに関するプレゼンテーションからスライドします。

Codepenでアクション上の上記のコードの一部を見てください。

SNAP SVG
1. に関するよくある質問（FAQ）
SNAP SVGと他のSVGライブラリの違いは何ですか？
2. SNAP SVGは、Scalable Vector Graphics（SVG）を使用するために特別に設計された強力で柔軟なライブラリです。他のSVGライブラリとは異なり、SNAP SVGは、SNAP SVGで生成された既存のSVGコンテンツとSVGコンテンツの両方をアニメーション化および操作するためのシンプルで直感的なAPIを提供します。また、グラデーション、パターン、クリッピングパスなどのほとんどのSVG機能をサポートし、すべての最新のブラウザと互換性があります。 SNAP SVG JavaScriptファイルをHTMLドキュメントに含める必要があります。公式SNAP SVG Webサイトからダウンロードするか、CDNから直接含めることができます。 SNAP SVGファイルを含めたら、SNAP SVG APIを使用してSVGコンテンツの作成と操作を開始できます。はい、SNAP SVGは複雑なアニメーションを作成するのに最適です。 SVG属性をアニメーション化できる強力なアニメーションAPIを提供します。 SNAP SVGのマトリックス変換を使用して、簡単に複雑なアニメーションを作成することもできます。さらに、SNAP SVGは緩和機能をサポートします。これは、スムーズで自然なアニメーションを作成するために使用できます。 、Firefox、Safari、Opera、Internet Explorer 9以上。ただし、一部のSVG機能は古いブラウザーでは完全にサポートされていない場合があります。
   SNAP SVGを使用してインタラクティブなSVGコンテンツを作成するにはどうすればよいですか？ 。 SNAP SVGのイベント処理関数を使用して、クリックやマウスの動きなどのユーザーインタラクションに応答できます。 SNAP SVGのアニメーションAPIを使用して、インタラクティブなアニメーションを作成することもできます。他のライブラリに干渉することはなく、ネイティブのJavaScriptオブジェクトを変更しません。これにより、SNAP SVGは、他のJavaScriptライブラリを使用するプロジェクトに最適です。 SNAP SVGの関数を使用して、SVG要素の属性を変更し、SVG要素を変換し、SVG要素をアニメーション化できます。 SNAP SVGのセレクター関数を使用して、特定のSVG要素を選択することもできます。
   SNAP SVGを使用してSVGフィルターを作成できますか？ SNAP SVGのフィルター関数を使用して、SVGフィルターをSVG要素に作成および適用できます。これにより、ぼやけ、照明、色の調整などの幅広い視覚効果を作成できます。 SVGグラデーションの作成。 SNAP SVGの勾配関数を使用して線形勾配と放射状勾配を作成できます。SNAPSVGの色関数を使用して勾配の色を定義できます。 🎜>はい、SNAP SVGはSVGパターンをサポートしています。 SNAP SVGのパターン関数を使用して、SVG要素にSVGパターンを作成および適用できます。これにより、テクスチャやパターンなどの幅広い視覚効果を作成できます。

以上がsnap.svgへの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。