キーテイクアウト

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

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

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

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

ああ、スナップ！

長(zhǎng)所：

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

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

無(wú)料でオープンソースです。

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

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

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

Chrome 29

オペラ24

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

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

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

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

  shapes
  描畫(huà)表面であるスナップラッパーを作成したら、その上にいくつかの形を描く時(shí)が來(lái)ました。サークルを描きたいとしましょう：

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

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

  楕円を描くこともできます。今回は垂直および水平半徑が必要です。繰り返しますが、すべてのパラメーターは必須です
  長(zhǎng)方形を描畫(huà)したい場(chǎng)合は、次のコードを使用します。これにより、左上コーナー（100px、100px）、200pxの幅、200pxの高さを備えた長(zhǎng)方形が作成されます。
  rect（）メソッドのクールなことは、垂直軸と水平軸に対して獨(dú)立して丸い角の半徑を制御する2つのオプションパラメーターも受け入れることです。これらのパラメーターは、渡されないときにデフォルトで0になりますが、1つ（水平半徑）のみを通過(guò)する場(chǎng)合、2番目のパラメーターはゼロに設(shè)定されないが、代わりに両方が同じ?jìng)帳蛳攵à工毪长趣俗⒁猡筏皮坤丹ぁ?

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

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

  線とポリゴン

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

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

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

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

  Paper.Polyline（）およびPaper.Polygon（）は同じ方法のエイリアスであり、デフォルトでは、結(jié)果として得られた（閉じた）ポリゴンは、黒い塗りつぶしで描かれ、ストロークがありません。そのため、上記のpolyline（）で描かれた線を見(jiàn)ることができませんでした（ただし、ページを検査することで、SVGコードが実際にコンテナに追加されていることを確認(rèn)できます）。 この動(dòng)作を変更するだけでなく、他の要素の外観を変更するには、屬性を?qū)毪工氡匾ⅳ辘蓼埂?

  屬性

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

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

  JavaScriptを使用してこれらのプロパティを割り當(dāng)てることで同じ結(jié)果を取得できます。

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

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

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

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

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

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

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

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

  SNAPは、SVG要素內(nèi)のネストラスター畫(huà)像をサポートし、非同期にロードし、負(fù)荷完了時(shí)にのみ表示します。

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

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

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

  同様に、畫(huà)像を回転させるか、作成後のある時(shí)點(diǎn)で要素（またはグループ）を移動(dòng)する必要がある場(chǎng)合があります。 Transform（）メソッドは、SVG変換文字列を渡すことにより、それを行うことができます：

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

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

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

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

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

  結(jié)論

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

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

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

  snap.svgチュートリアル。

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

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

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

以上がsnap.svgへの紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。