1. SVGとの出会いと初体験
SVGとは
SVGの正式名称は(Scalable Vector Graphics)で、スケーラブルなベクターグラフィックスを意味します。(ベクトルの定義: 大きさと方向の両方を持つ量。矢印の付いた線分など、物理学ではベクトルと呼ばれます。長さはサイズを示し、矢印は方向を示します。数学ではベクトルと呼ばれます。コンピュータでは、ベクトル図を無制限に拡大できます (変形せずに拡大できます)
SVG は、XML 形式に基づくベクトル図で、主に 2 次元グラフィックスを定義するために使用され、インタラクションとアニメーションをサポートします。
SVG 仕様は、World Wide Web Consortium (W3C) によって 1998 年から開発された標準です。
SVG 画像は品質を損なうことなく拡大縮小でき、圧縮もサポートされています。
XML ベースの SVG は、テキスト エディターまたはベクター グラフィックス エディターで簡単に作成および編集でき、ブラウザーで直接表示できます。
SVG とブラウザーの互換性:
SVGの歴史
◼ SVG1.x バージョン
SVG は 1998 年に W3CSVG ワーキング グループによって開発され、SVG 1.0 は 2001 年 9 月 4 日に W3C によって推奨される標準になりました。
SVG 1.1 は、2003 年 1 月 14 日に W3C 推奨標準になりました。このエディションでは、モジュール仕様にコンテンツが追加されます。それ以外は、1.1 と 1.0 の間にほとんど違いはありません。
SVG Tiny 1.2 は、主にパフォーマンスの低い小型デバイス用のグラフィックスを生成するために、2008 年 12 月 22 日に W3C 推奨になりましたが、後に SVG 2 によって非推奨になりました。
SVG 1.1 の 2 番目のバージョンは、2011 年 8 月 16 日にリリースされました。今回は正誤表と説明書が更新されただけで、新しい機能は追加されませんでした。
◼ SVG2.0 バージョン（推奨）
SVG 2.0 は、2016 年 9 月 15 日に W3C の推奨候補となり、最新のドラフトは 2020 年 5 月 26 日にリリースされました。
SVG2.x SVG1.x (https://www.w3.org/TR/SVG/changes.html) からの変更点:
✓ 「svg」要素からbaseProfileとversion属性を削除
✓ 「auto」を使用する機能を追加「image」のwidthとheight属性について
✓ 「desc」および「title」要素に「lang」属性
を追加 ✓ 「xlink:type」、「xlink:role」、「xlink:arcrole」、「xlink:show」および「」を削除xlink :actuate'attributes.
✓ 名前空間なしで 'href' を使用することを優先し、'xlink:href' 属性を非推奨にしました。
SVGの利点
◼ 優れた拡張性: ベクター画像はブラウザーで歪みなく拡大・縮小でき、多くのデバイスやブラウザーで使用できます。ラスター画像（PNG、JPG）は、拡大または縮小すると歪んでしまいます。
ベクトル画像は、ベクトルの点、線、形状、数式に基づいて構築されたグラフィックスであり、グラフィックスにはピクセルがなく、拡大または縮小しても歪みません。
ラスター イメージは、写真などの高解像度イメージを形成できる、多数のピクセルを含む小さな色付きの正方形であるピクセルから構築されたイメージです。画像内のピクセルが多いほど、品質は高くなります。
◼ 柔軟性: SVG は W3C によって開発された標準であり、CSS、JavaScript、HTML、SMIL などの他の言語やテクノロジーと組み合わせて使用できます。SVG 画像は JS と CSS を使用して直接操作でき、SVG は DOM に統合することもできるため、非常に便利で柔軟に使用できます。
◼ アニメーション化可能: SVG 画像は、JS、CSS、SMIL を使用してアニメーション化できます。Web 開発者にとっては非常にフレンドリーです。
◼ 軽量: SVG 画像は他の形式と比較してサイズが非常に小さいです。画像によっては、PNG 画像は SVG 画像の 50 倍の品質になることがあります。
◼ 印刷可能: SVG 画像は、画質を損なうことなく、任意の解像度で印刷できます。
◼ SEO に良い: SVG 画像は検索エンジンによってインデックス付けされます。したがって、SVG 画像は SEO (検索エンジン最適化) の目的に最適です。
◼ 圧縮可能: 他の画像形式と同様、SVG ファイルは圧縮をサポートしています。
◼ 編集が簡単: SVG 画像はテキスト エディターだけで作成できます。デザイナーは通常、Adobe Illustrator (AI) などのベクター グラフィック ツールを使用して作成および編集します。
SVGの欠点
◼ 不快感と HD 画像の作成
SVG 形式は、ロゴやアイコン (ICON) などの 2D グラフィックスには最適ですが、HD 画像やピクセルレベルの操作には適していません。
SVG 画像は、ピクセルの代わりにポイントとパスを使用してレンダリングされるため、標準の画像形式ほど詳細を表示できません。
◼ SVG 画像が複雑になると読み込みが遅くなる
◼ プラットフォームに完全に拡張できない
SVG は 1998 年から存在し、ほとんどの最新ブラウザ (デスクトップおよびモバイル) でサポートされていますが、IE8 以下のレガシー ブラウザでは動作しません。caniuse のデータによると、ユーザーの約 5% が SVG をサポートしていないブラウザを使用しています。
SVG アプリケーションのシナリオ
◼ SVG の適用シナリオは何ですか? 他の画像形式に対する SVG の優位性を保証するいくつかのアプリケーション シナリオを次に示します。
SVG は、ベクトル ロゴ (ロゴ)、アイコン (ICON)、およびその他の幾何学的なデザインの表示に最適です。
SVG はスケーラビリティに優れているため、複数のサイズに適応する必要がある画面に表示する必要があるアプリケーションに適しています。
SVG は、単純なアニメーションを作成する必要がある場合に理想的な形式です。
✓ SVG は JS と対話して、ライン アニメーション、トランジション、その他の複雑なアニメーションを作成できます。
✓ SVG は CSS アニメーションと対話したり、独自の組み込み SMIL アニメーションを使用したりできます。
SVGは、さまざまなグラフ（棒グラフ、折れ線グラフ、円グラフ、散布図など）の作成や、大画面のビジュアルページの開発にも非常に適しています。
SVGとキャンバスの違い
◼ スケーラビリティ:
SVG は、ベクトルの点、線、形状、数式に基づいて構築されたグラフィックであり、このグラフィックにはピクセルがなく、ズームインまたはズームアウトしても歪みません。
キャンバスは個々のピクセルで構成されるグラフィックであり、ズームインするとグラフィックが粗くなり、ピクセル化 (ぼやけて) します。
SVG は、任意の解像度で高品質に印刷できます。Canvas は任意の解像度での印刷には適していません。
◼ レンダリング能力:
SVG が複雑な場合、そのレンダリングは非常に遅くなります。これは、DOM を大幅に使用すると、レンダリングが非常に遅くなるからです。
Canvas は、高性能のレンダリングと高速なグラフィック処理機能を提供します。たとえば、H5 の小規模なゲームの作成に適しています。
画像に多くの要素が含まれている場合、SVG ファイルのサイズは速く増加します (DOM が複雑になります)。一方、Canvas はそれほど大きくなりません。
◼ 柔軟性:
SVG は JavaScript と CSS を通じて変更でき、SVG を使用してアニメーションや特殊効果を作成すると非常に便利です。
Canvas は JavaScript を通じてのみ変更でき、アニメーションを作成するにはフレームごとの再描画が必要です。
◼ 使用シナリオ:
Canvas は主に、ゲーム開発、グラフィックスの描画、複雑な写真の合成、およびカラーピッカーやレトロ写真などの画像に対するピクセルレベルの操作の実行に使用されます。
SVG は、ベクター ロゴ (ロゴ)、アイコン (ICON)、およびその他の幾何学的なデザインの表示に最適です。
SVG の初体験
◼ SVG ベクター画像を描画するには? SVG ベクター グラフィックスを描画するには、次の 4 つの一般的な方法があります。
方法 1: 別の svg ファイルに描画し、その svg ファイルはブラウザのプレビューで直接使用するか、HTML に埋め込むことができます (推奨) 方法 2: HTML
ファイル svg で直接使用する描画する要素 (推奨)
方法 3: JavaScript コードを直接使用して、SVG ベクター グラフィックを生成します。
方法 4: AI (Adobe IIIustractor) ベクター描画ツールを使用してベクター グラフィックを描画し、svg ファイルとしてエクスポートする (推奨)
◼ SVG を初めて体験する ステップ
1: 新しい svg ファイルを作成し、その 1 行目に XML ファイル宣言を記述します。ファイル
ステップ 2: <svg> 要素を記述し、次の属性を要素に追加します:
✓ version: 使用する svg のバージョンを指定します。値は 1.0 と 1.1 で、2.0 はありません。
✓ BaseProfile: SVG 2 より前は、SVG バージョンを検証および識別するために version 属性とbaseProfile 属性が使用されていました。これら 2 つの属性は、SVG2 以降は推奨されません。
✓ 幅/高さ : SVG キャンバス (ビューポート) の幅と高さを指定します。デフォルト値はそれぞれ 300 と 150 で、デフォルトでは px 単位が使用されます。
✓ xmlns: svg 要素 (http://www.w3.org/2000/svg) に名前空間を割り当てることは、
<svg> タグとその子要素がすべてこの名前空間に属することを意味します。
ステップ 3: <svg> 要素にグラフィックス (例: <rect>) 要素を追加します
ステップ 4: ブラウザで直接プレビューするか、HTML に埋め込みます (HTML の埋め込みには 6 つのオプションがあります)
XML および DTD 宣言
◼ SVG は XML ファイル形式です。XML ドキュメントを作成する場合は、通常、XML 宣言を作成することをお勧めします。XML 1.0 では XML 宣言はオプションであるため、記述することをお勧めしますが、必須ではありません。ただし、XML 1.1 では宣言は必須であり、宣言がない場合は自動的にその文書が XML 1.0 文書であることを意味します。したがって、SVG ファイルを作成するときに XML 宣言も作成することをお勧めします。◼ SVG の XML 宣言形式: <?xml version="1.0" encoding="UTF-8" Standalone="no" ?> version はバージョンを指定します (必須) encoding は XML ドキュメントの
エンコーディングを指定します (オプション、デフォルトは UTF-8) スタンドアロン: 現在の XML ドキュメントが外部タグ宣言に依存するかどうかを指定します (オプション。この属性を使用する場合、DTD 宣言と一緒に使用した場合にのみ意味があります)。✓ デフォルトは no: 外部マークアップ宣言に依存することを意味します✓ yes: 内部デフォルト マークアップ宣言に依存することを意味します◼ SVG の Document Type Declaration (DTD)。これにより、パーサーは XML ファイルが仕様に準拠しているかどうかを検証できます。 HTML5 ファイルの DTD 宣言。 XML での内部 DTD 宣言 (オプション) XML での外部 DTD 宣言 (オプション)
<!DOCTYPE svgPUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
SVGドキュメント構造
◼ SVG1.1 ドキュメント構造:
最初の行: XML 宣言が含まれます。SVG ファイルは XML 形式であるため、XML 宣言を含める必要があります。
2 行目: 文書型宣言 (DTD) を定義します。ここでは外部 SVG1.1 文書型に依存し、XML ファイルが仕様に準拠しているかどうかをパーサーに検証させます。
<!DOCTYPE svgPUBLIC “-//W3C//DTD SVG 1.1//EN”"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
◼ SVG2.0 ドキュメント構造:
SVG2version 属性と BaseProfile 属性が削除され、Document Type Declaration (DTD) を記述することは推奨されません。の
JSでSVGを作成する
◼ JS スクリプトを使用して SVG を作成する場合、作成されたすべての要素に名前空間を追加する必要があります。
例: <svg> または <rect> 要素を作成するには、名前空間 (http://www.w3.org/2000/svg) を追加する必要があります
要素の属性にプレフィックスがない場合、名前空間の割り当てが null です。
◼ XML1.1 名前空間仕様では、接頭辞属性のない (接頭辞 xlink:href を持つ) 名前空間の名前には値がなく、名前空間の値には null 値を使用する必要があることが推奨されているためです。
◼ SVG で一般的に使用される DOM2API を作成します:
createElementNS (ns, elname): SVG 要素を作成します
setAttributeNS (ns, attrname, value): SVG 要素に属性を追加します
getAttributeNS (ns, attrname): SVG 要素の属性を取得します
hasAttributeNS ( ns, attrname): SVG 要素に属性が存在するかどうかを確認します
RemoveAttributeNS (ns, attname): SVG 要素の属性を削除します
その他の API: https://developer.mozilla.org/zh-CN/docs/Web /SVG/名前空間_クラッシュ_コース
HTML から SVG へ
◼ 方法 1: img 要素
は画像として使用され、インタラクションはサポートされず、ie9 以降とのみ互換性があります ◼
方法 2: CSS 背景 は
背景画像として使用され、インタラクションはサポートされません◼
方法 3: 直接HTMLファイル内でソースファイルを引用する
HTMLのDOM要素としてインタラクションをサポートしており、ie9以降のみと互換性がある◼
方法4：object要素（理解する）。
インタラクティブな SVG をサポートし、オブジェクト参照の取得、SVG のアニメーションの設定、スタイルシートの変更などが可能です
。 ◼ 方法 5: iframe 要素 (理解)。
インタラクティブな SVG をサポートし、iframe 参照の取得、SVG のアニメーションの設定、スタイルシートの変更などが可能です。
◼ 方法 6: 要素を埋め込む (理解)。
インタラクティブ SVG をサポートし、埋め込み参照の取得、SVG のアニメーションの設定、スタイル シートの変更などが可能で、古いブラウザのサポートが強化されています。
2. グリッドと座標系
SVG グリッドと座標系
◼ SVG で使用される座標系 (グリッド システム) は Canvas の座標系と類似しています。座標系は左上隅を (0,0) 座標原点とし、座標はピクセル単位で、x 軸の正の方向は右、y 軸の正の方向は下です。
◼ SVG グリッド (座標系)
<svg> 要素のデフォルトの幅は 300px、高さは 150px です。右側に示すように、<svg> 要素はデフォルトでグリッドで覆われています。
一般に、グリッド内の 1 つのセルは svg 要素内の 1 ピクセルに相当します。
基本的に、SVG ドキュメント内の 1 ピクセルは、出力デバイス (ディスプレイなど) 上の 1 ピクセルに対応します (スケーリングされていない場合)。
<svg> 要素は他の要素と同様に座標空間を持ち、その原点は要素の左上隅にあり、初期ビューポート座標系と呼ばれます <svg> のtransform属性は移動に使用できます。 SVG でのオブジェクトの回転と
拡大縮小 変形を使用する <svg> 内の要素などの要素は、要素内に新しい座標系を確立し、その後のすべての変更は新しく作成された座標系に基づくように要素のデフォルトが設定されます。
SVG 座標系の単位
◼ SVG 座標系。単位が明示的に指定されていない場合、デフォルトの単位はピクセルです。
◼ 例: <rect x="0" y="0" width="100" height="100" /> 長方形を
定義します。つまり、左上隅から開始して右に 100px 拡張し、下に 100px 拡張して、100*100 の大きな長方形を形成します。
◼ もちろん、次のように座標系の単位を手動で指定することもできます。
3. ビューポートとビューフレーム
ビューポート - ビューポート
◼ ビューポート
ビューポートは、SVG の表示領域 (または SVG キャンバスのサイズ) です。ビューポートは、特定のシーンを見ることができる窓と考えることができます。
<svg> 要素の width 属性と height 属性を使用して、ビューポートのサイズを指定できます。
最も外側の SVG 要素の幅と高さが設定されると、ブラウザは初期ビューポート座標系と初期ユーザー座標系を確立します。
◼ ビューポート座標系
ビューポート座標系は、ビューポート上に設定される座標系であり、ビューポートの左上隅の点 (0, 0) を原点とし、x 軸は右方向を正とし、 y 軸は下向きが正です。
初期ビューポート座標系の 1 単位はビューポート内の 1 ピクセルに相当し、HTML 要素の単位と同様です。
◼ ユーザー座標系 (現在の座標系または使用されているユーザー空間とも呼ばれます。以降の描画ではこの座標系を参照します)
ユーザー座標系は、SVG ビューポート上に確立された座標系です。この座標系は、最初はビューポート座標系と同じです。その原点はビューポートの左上隅にあります。
viewBox プロパティを使用すると、初期のユーザー座標系を変更して、ビューポート座標系と同じでなくなるようにすることができます。
◼ なぜ 2 つの座標系があるのですか?
SVGはベクター画像であるため、任意のスケーリングをサポートしています。ユーザー座標系で描画されたグラフィックスは、最終的にはビューポート座標系を基準にして比例的に拡大縮小されます。
ビューボックス - viewBox
◼ ViewBox (viewBox)
viewport は SVG キャンバスのサイズであり、viewBox はユーザー座標系での位置とサイズを定義するために使用されます (通常、領域はビューポートを満たすように拡大縮小されます)。
viewBox は、ユーザー座標系のサイズを指定するために使用されるとも解釈できます。SVG グラフィックスはすべてこの領域に描画されるためです。ユーザー座標系はビューポート座標系より小さくても大きくてもよく、ビューポート内で全体または部分的に表示できます。
ビューポート座標系が作成されると (<svg> は幅と高さを使用します)、ブラウザはそれと同じデフォルトのユーザー座標系を作成します。
viewBox プロパティを使用して、ユーザー座標系のサイズを指定できます。
✓ ユーザー座標系がビューポート座標系と同じアスペクト比を持つ場合、ビューポート領域を満たすように viewBox 領域が拡大されます。
✓ ユーザー座標系とビューポート座標系のアスペクト比が異なる場合、preserveAspectRatio プロパティを使用して、ユーザー座標系全体がビューポート内に表示されるかどうかを指定できます。
◼ viewBox の構文
viewBox = <min-x> <min-y> <width> <height>、例: viewBox =' 0 0 100 100'
✓ <min-x> と <min-y> は左上を決定しますビュー ボックスのコーナー座標 (ユーザー座標系の原点は変更されず、描画は依然として元の 0,0 から始まります)
✓ <width> <height> はビュー ボックスの幅と高さを決定します。
➢ 幅と高さは、親の <svg> 要素に設定されているものと同じである必要はありません。
➢ 幅と高さの負の値は無効で、0 は要素の表示を無効にします。
viewbox - viewBox - 同じアスペクト比
◼ ビューポートと viewBox が同じアスペクト比を持つ例を参照してください。
✓ viewBox プロパティでビューボックスをビューポートの半分のサイズに設定します。
✓ ここではビューボックスの左上隅を変更せずにそのままにし、ゼロに設定します。
✓ ビューボックスの幅と高さは、ビューポートの幅と高さの半分になります。
◼ それでは、viewbox="0 0 100 100" は具体的に何をするのでしょうか?
キャンバスの表示可能領域を指定します。ユーザー座標系は左上の点(0, 0)から点(100, 100)まで、デフォルトの単位はpxです。
次に、SVG グラフィックスを viewBox 領域に描画します。
viewBox 領域は、ビューポート全体を埋めるように比例して拡大されます (歪みなしでズーム)。
ユーザー座標系はビューポート座標系にマッピングされるため、この場合、1 ユーザー単位は 4 ビューポート単位に相当します。
SVG キャンバス上に描画されるものはすべて、このユーザー座標系を基準にして描画されます。
ビューボックス - ビューボックス - 異なるアスペクト比
◼ 400*400 のビューポートでは、viewbox="0 0 200 100" は何をしますか?
viewBox のアスペクト比は維持されますが、viewBox はビューポート領域全体をカバーするように拡大されません。
ViewBox viewBox は、ビューポート内で垂直方向と水平方向の中央に配置されます。
◼ ビューポート内のビュー フレームの位置を変更したい場合はどうすればよいですか?
prepareAspectRatio 属性を <\svg> に追加します。この属性により、均一なズーム viewBox viewBox を強制できます。
✓ prepareAspectRatio="none"、ストレッチ グラフィックスがビューポート全体に表示されるように強制します。
✓ prepareAspectRatio="xMinYMin"、グラフィックスはビューポートの最小の x 軸と y 軸に表示されます。
4. 形状とパスを描画する
描画 - 長方形 (長方形)
◼
SVG の基本的な形状 SVG キャンバスでは、形状を挿入したい場合、ドキュメント内に対応する要素を作成できます。
異なる要素は異なる形状に対応し、異なる属性を使用してグラフィックスのサイズと位置を定義できます。
SVG がサポートする基本的な形状は、長方形、円、楕円、線、ポリライン、多角形、パスです。
◼ 次に、SVG を使用して長方形 (rect) を描画します
<rect> 要素が画面上に描画されます
<rect> 要素には、画面上の位置と形状を制御するための 6 つの基本属性があります。
◼ <rect> 要素の 6 つの基本プロパティ
x: 長方形の左上隅の x 軸位置
y: 長方形の左上隅の y 軸位置
width: 長方形の幅
height: 長方形の高さ
rx: 丸い角の x 軸方向
ry の半径: フィレットの y 軸方向の半径。
描く - 円（円）
◼ 次に、SVG を使用して円 (circle) を描画します。
<circle> 要素は、画面上に円を描画します。
<circle> 要素には、円を設定するための 3 つの基本属性があります。
◼<circle> 要素の 3 つの基本プロパティ
r: 円の半径
cx: 円の中心の x 軸位置
cy: 円の中心の y 軸位置
描画 - 楕円 (楕円)
◼ 次に、SVG を使用して楕円 (楕円) を描画します
<ellipse> 要素は、<circle> 要素のより一般的な形式であり、円の x 半径と y 半径をそれぞれスケールできます。
x 半径と y 半径、数学者は通常、それを長軸半径と短軸半径と呼びます
<ellipse> 要素には、楕円を設定するための 4 つの基本属性があります。
◼ <ellipse> 要素 4 つの基本プロパティ
rx: 楕円の x 軸半径
ry: 楕円の y 軸半径
cx: 楕円の中心の x 軸位置
cy: 楕円の y 軸位置楕円の中心
描く - 円（円）
◼ 次に、SVG を使用して円 (circle) を描画します。
<circle> 要素は、画面上に円を描画します。
<circle> 要素には、円を設定するための 3 つの基本属性があります。
◼ <circle> 要素の 3 つの基本属性
r: 円の半径
cx: 円の中心の x 軸位置
cy: 円の中心の y 軸位置
描画 - 楕円 (楕円)
◼ 次に、SVG を使用して楕円 (楕円) を描画します
<ellipse> 要素は、<circle> 要素のより一般的な形式であり、円の x 半径と y 半径をそれぞれスケールできます。
x 半径と y 半径、数学者は通常、それを長軸半径と短軸半径と呼びます
<ellipse> 要素には、楕円を設定するための 4 つの基本属性があります。
◼ <ellipse> 要素 4 つの基本プロパティ
rx: 楕円の x 軸半径
ry: 楕円の y 軸半径
cx: 楕円の中心の x 軸位置
cy: 楕円の y 軸位置楕円の中心
描く - 線 (ライン)
◼ 次にSVGを使って直線（ライン）を描画します
<line>要素は直線を描画します。2 つの点の位置を属性として受け取り、線の開始位置と終了位置を指定します。
表示するにはストロークする必要があり、キャンバスの線と同様に塗りつぶしには対応していません。
<line > 要素には、ラインを設定するための 4 つの基本属性があります。
◼<line> 要素には 4 つの基本属性があります
x1: 始点の x 軸位置
y1: 始点の y 軸位置
x2: 終点の x 軸位置
y2: y - 終点の軸位置
描画 - ポリライン (ポリライン)
◼ 次にSVGを使って直線（ポリライン）を描きます
<polyline>要素はつながった直線の集合です。多くのポイントを含めることができるため、ポリラインのすべてのポイント位置は Points プロパティに配置されます。
デフォルトでは黒で塗りつぶされます
<polyline> 要素には、ポリラインのすべての点の位置を設定する基本属性があります。
◼<polyline> 要素には 1 つの基本属性
ポイント: ポイント セット シーケンスがあります。各数値は、ブランク、カンマ、終了コマンド、または改行で区切られます。
各点には 2 つの数値が含まれている必要があります。1 つは x 座標、もう 1 つは y 座標です。
したがって、点リスト (0,0)、(1,1)、(2,2) は、「0 0, 1 1, 2 2」のように書くことができます。
✓ サポート形式: 「0 0、1 1、2 2」または「0、0、1、1、2、2」または「0 01 12 2」
描画 - ポリゴン（多角形）
◼ 次に、SVG を使用して多角形 (ポリゴン) を描画します
。 <polygon> 要素はポリラインと非常によく似ており、一連の点を接続する直線で構成されます。違いは、<polygon> のパスが最後の点で自動的に最初の点に戻ることです。なお、長方形も多角形であり、多角形から長方形を作成することも可能です。
デフォルトでは黒で塗りつぶされます
<polygon> 要素には、多角形線のすべての点の位置を設定するために使用される基本属性があります。
◼<polygon> 要素には 1 つの基本属性
ポイント: ポイント セット シーケンスがあります。各数値は、ブランク、カンマ、終了コマンド、または改行で区切られます。
各点には 2 つの数値が含まれている必要があります。1 つは x 座標、もう 1 つは y 座標です。
したがって、点リスト (0,0)、(1,1)、(2,2) は、「0 0, 1 1, 2 2」のように記述することをお勧めします。
パス描画後は形状が閉じているため、最終的な線は位置(2,2)から位置(0,0)までを結びます。
描画 - パス (パス)
◼ SVG を使用してパスを描画してみましょう
<path> 要素は、おそらく SVG で最も一般的な形状です。<path> 要素を使用すると、長方形 (長方形または角丸長方形)、円、楕円、ポリライン、多角形、およびベジェ曲線、二次曲線、その他の曲線などのその他の形状を描画できます。
デフォルトでは黒で塗りつぶされ、デフォルトではパスは閉じられません
<path> 要素には、パスの点の位置を設定するための基本属性があります。
◼ <path> 要素 1 基本属性
d: 点集合配列、およびパスの描画方法に関するその他の情報は、M コマンドで開始する必要があります。
✓ したがって、ポイントリスト (0,0)、(1,1)、および (2,2) は、「M0 0, 1 1, 2 2」のように記述することをお勧めします。
✓ サポート形式: 「M0 0, 1 1, 2 2」または「M0 0, 1 1,2 2」または「M0, 0, 1, 1, 2, 2」または「M0 01 12 2」
SVG パスとコマンド
◼ SVG パスと名前付き
<path> 要素は、基本的な SVG 形状の中で最も強力です。これを使用して、直線、曲線、円弧などを作成できます。
<path>要素の形状は属性dで定義され、属性dの値は「コマンド＋パラメータ」の並びになります。
各コマンドはキー文字で表されます。たとえば、文字「M」は「移動」コマンドを表します。パーサーがこのコマンドを読み取ると、特定のポイントに移動するつもりであることがわかります。コマンド文字の後には、移動先の点の x 座標と y 座標が続きます。たとえば、点(10,10)に移動するコマンドは「M 10 10」コマンドと記述します。この文字段落が終了すると、パーサーは次のコマンド段落を読み取ります。各コマンドには 2 つの表現があります。1 つは大文字を使用するもので、絶対位置を意味します。もう 1 つは、相対的な位置を示す小文字を使用する方法です (例: 前のポイントから 10 ピクセル上に移動し、7 ピクセル左に移動します)。
属性 d はユーザー座標系を採用しており、単位を示す必要はありません。
◼ d 属性値でサポートされる
コマンド ラインコマンド
✓ M/m: MoveTo
✓ L/l: LineTo
✓ Z/z: Close Path
✓ H/h: 水平
✓ V/v: 垂直
カーブコマンド
✓ C: 3 次ベッサー曲線
✓ S: 速記 3 次ベジェ曲線
✓ Q: 2 次ベジェ曲線
✓ T: 速記 2 次ベジェ曲線
5. 文字や絵を描く
絵を描く
◼ SVGで画像を描画
<image>要素のhref属性に画像URLを導入します
◼ 注意
image要素ではx, yの値は設定されず、自動的に0に設定されます。
画像要素の高さと幅が設定されていない場合、デフォルトは画像サイズになります。
幅と高さが 0 の場合、画像は表示されません。
外部画像は、src 属性ではなく、href 属性で参照する必要があります。
href 属性の互換性
描画テキスト
◼ SVG キャンバスにテキストを描画する方法を見てみましょう。
<text>要素はSVGキャンバスにテキストを描画するために使用されます。
◼<text>要素の基本属性
x属性とy属性は、ユーザー座標系におけるテキストの表示位置を決定します。
text-anchor テキスト フロー方向属性、start、middle、end、または継承値を持つことができ、デフォルト値 start
dominant-baseline ベースライン配置属性: auto、middle、または Hanging 値を持つ、デフォルト値: auto
◼<text>要素のフォントプロパティ
テキストの重要な部分は、テキストが表示されるフォントです。SVG には、CSS と同様のいくつかのプロパティが用意されています。次のプロパティは、SVG プロパティまたは CSS プロパティとして設定できます。
✓ font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-間隔、単語間隔、テキスト装飾。
◼ その他のテキスト関連要素:
✓ x プロパティと y プロパティは、ビューポートの座標系でテキストが表示される場所を決定します。
✓alignment-baseline ベースラインの配置属性: auto、baseline、middle、hanging、top、bottom...、デフォルトは auto
6、SVGのグループ化と多重化
要素の組み合わせ (g)
◼ 要素の構成
<g> 要素は要素を組み合わせるためのコンテナです。
g 要素に追加された変換は、そのすべての子要素に適用されます。
g 要素に追加された属性のほとんどは、そのすべての子要素に継承されます。
g 要素は、複雑なオブジェクトの定義にも使用でき、次の方法でアクセスできます。
イベントプロパティ: onchange 、 onclick、ondblclick、ondrag…
アニメーションプロパティ:transform
詳細
グラフィック要素 (defs) の再利用
◼ SVG を使用すると、いくつかの再利用可能な要素を定義できます。
<defs> 要素で再利用可能な要素を定義して渡します。
要素の導入（使用）
◼<use>要素はSVGドキュメントからノードを取得し、取得したノードを指定された場所にコピーします。
<use> は DOM ノードのディープクローン作成と同等で、use 要素が配置されている位置にクローンを作成します。
クローン化されたノードは、指定すると非表示になります。
グラフィック要素の再利用（シンボル）
◼ <symbol> 要素と
7、塗りつぶしと境界線
◼ SVG で要素に色を付けたい場合、一般に 2 つの解決策があります:
最初の方法: 要素の属性 (塗りつぶし (fill) 属性、ストローク (ストローク) 属性など) を直接使用します。
2 番目の方法: CSS スタイルを直接記述します。SVG も HTML の要素であり、CSS を使用したスタイルの記述もサポートしているためです。
◼ 1 つ目の方法: 要素の属性 (塗りつぶしとストローク) を直接使用する
SVG では、ほとんどの要素の色付けは塗りつぶしとストロークの 2 つの属性によって行うことができます。
✓ fill プロパティ: オブジェクトの塗りつぶしの色を設定します。サポート: 色の名前、16 進数値、rgb、rgba。
✓ ストローク属性: 描画オブジェクトの境界線の色を設定します。サポート: 色の名前、16 進数値、rgb、rgba。
塗りつぶし属性 (fill)
◼ fill 属性は、SVG 内の要素を色で塗りつぶすために特別に使用されます。
fill="カラー"。サポート: 色名、16 進値、rgb、rgba、currentColor (自身または親のフォント色を継承)。
◼ 以下に示す色で四角形を塗りつぶします: fill="pink"
◼ 塗りつぶしの色の不透明度を制御します
fill-opacity="number"、このプロパティは塗りつぶしの色の不透明度を制御するために特別に使用されます。値は0から1。
ストローク特性（ストローク）
◼ ストローク属性
ストローク="color": 要素の境界線の塗りつぶし色を指定します。
ストローク-opacity="number": 要素の境界線の塗りつぶし色の透明度を制御します。
ストローク幅="数値": ストロークの幅を指定します。境界線はパスを中心線として描画されることに注意してください。
ストローク-linecap="butt|square|round": 境界線の端点のスタイルを制御します。
blood-linejoin="miter|round|bevel": 2 つの線分の接合部のスタイルを制御します。
ストローク-dasharray="number[,number,….]": 境界線にダッシュの種類を適用します。
✓ 値はカンマで区切られた数値の配列である必要があり、スペースは無視されます。たとえば、3、5:
➢ 最初のものは、色付き領域の長さが 3 であることを意味します
。 ➢ 2 番目のものは、色なし領域の長さが 5 であることを意味します。
ストローク-ダッシュオフセット: ダッシュ配列モードでのパスのオフセットを指定します。
✓ 値は数値型で、正または負の値を指定できます。
CSSスタイル
◼ CSS スタイルを直接記述してパディングとストロークを実現
要素の属性を定義するだけでなく、CSS を通じてパディングとストロークを実装することもできます (CSS スタイルは defs 内、または HTML の先頭や外部などに記述できます)。 。
構文はHTMLでCSSを使用する場合と同じですが、塗りつぶしとストロークに背景色と枠線を変更する必要があることに注意してください
CSSですべての属性を設定できるわけではなく、色と塗りつぶしの部分はCSSで設定できますCSS 。
✓ 例えば、Fill、Stroke、Stroke-Dasharray などは CSS で設定できますが、例えば、パスコマンドは CSS で設定できません。
◼ CSS を使用して設定できるプロパティとできないプロパティはどれですか?
SVG仕様では、属性はPresentationAttributes属性とAttributes属性に分かれています。
✓ PresentationAttributes 属性 (CSS および要素をサポート)
✓ Attributes 属性 (要素内でのみ使用可能)
✓ ヒント: これらの属性は暗記する必要はありません。使いすぎる場合は覚えておいて、忘れたときにテストしてください。
◼ CSS は、SVG 内の要素を塗りつぶし、ストロークし、色付けし、次の 4 つの記述方法をサポートします。
方法 1: インライン (インライン) CSS スタイル、要素の style 属性に記述
方法 2: インライン (内部) CSS スタイル、で書かれている
◼ CSS スタイルの優先順位: インライン スタイル > defs のスタイル > 外部/内部ヘッド > 属性塗りつぶし