HTML5 SVG 2D 入門 7 — SVG Elements の再利用と参照_html5 チュートリアル スキル

先ほどたくさんのグラフィック要素を紹介しましたが、多くのグラフィック自体が同じ場合、毎回新しいグラフィック要素を定義する必要がありますか?グラフィックを共有できますか?これがこのセクションの焦点、つまり SVG 要素の再利用です。

結合 g 要素
g 要素は、この方法で関連するグラフィック要素のグループを全体に結合するコンテナーであり、この全体を操作できます。この要素は通常、desc 要素および title 要素と組み合わせて使用​​して、ドキュメントに関する構造情報を提供します。通常、適切に構造化されたドキュメントは読みやすく、効率的に表示されます。小さな例を見てみましょう:

コードをコピーします

コードは次のとおりです:

version="1.1"width="5cm"height="5cm">
2 つのグループ、それぞれ 2 つの長方形

🎜>






fill="none"ストローク="blue" ストローク幅=".02cm"/>


いくつかの点に注意してください

:
1.xmlns="http://www.w3.org/2000/svg" は、svg 要素全体のデフォルトの名前空間が svg であることを示します。曖昧さがない場合は省略可能です。 svg ドキュメントは XML ドキュメントであるため、XML 名前空間の関連ルールがここに適用されます。たとえば、SVG 表示用の名前空間を指定したり、名前空間のエイリアスを指定したりできます。 2.g 要素はネストできます。 3. 結合されたグラフィック要素には、単一の要素と同じように ID 値を与えることができます。この方法では、必要な場合 (アニメーションや要素のグループの再利用など)、この ID 値を参照するだけで済みます。
4. グラフィック要素のグループを結合すると、この要素のグループに関連する属性 (塗りつぶし、ストローク、変換など) を均一に設定できます。これは、組み合わせが使用されるシナリオでもあります。


Template-symbol 要素

symbol 要素は、グラフィック テンプレートを定義するために使用されます (テンプレートには多くのグラフィックを含めることができます)。このテンプレートは use 要素によってインスタンス化できます。テンプレートの機能は g 要素の機能と非常に似ていますが、どちらも一連のグラフィック オブジェクトを提供しますが、いくつかの違いがあります。 g 要素との違いは次のとおりです: 1. シンボル要素自体はレンダリングされず、シンボル テンプレートのインスタンスのみがレンダリングされます。 2. シンボル要素には viewBox 属性と prepareAspectRatio 属性を含めることができ、これによりシンボルがグラフィック要素を拡大縮小できるようになります。

レンダリングの観点から見ると、シンボル要素に似た要素は、マーカー (矢印とラベルの定義) 要素とパターン (色の定義) 要素です。これらの要素の使用法は、基本的にインスタンス化に使用されます。このため、シンボルに対して「display」属性は意味がありません。
次の変更されたコードは、シンボルの使用方法を示しています:

コードをコピーします

コードは次のとおりです:

xmlns:xlink="http://www.w3.org/1999/xlink"

version="1.1"width="5cm"height="5cm">
2 つのグループ、それぞれ 2 つの長方形









fill="none"ストローク="blue"ストローク幅=".02cm"/>
>

define-defs 要素
SVG を使用すると、オブジェクトのセットを定義し、このオブジェクトのセットを再利用できます (グラフィック オブジェクトだけではないことに注意してください)。最も一般的な例は、グラデーション カラーを定義し、それを他のグラフィックス オブジェクトの fill 属性に割り当てることです。グラデーション カラーは定義時にレンダリングされないため、このタイプのオブジェクトはどこにでも配置できます。再利用はグラフィック オブジェクトに存在することが多く、定義時に直接レンダリングするのではなく、参照された場所でレンダリングする必要があります。これは defs 要素を使用して実現できます。

一般に、推奨されるアプローチは、可能な限り参照されるオブジェクトを defs 要素に入れることです。これらのオブジェクトは通常、altGlyphDef、clipPath、カーソル、フィルター、マーカー、マスク、パターン、linearGradient、radialGradient、シンボルおよびグラフィック オブジェクトなどです。これらのオブジェクトを defs 要素で定義すると、理解しやすくなり、アクセシビリティが向上します。

実際、コンテナ オブジェクトとしての g 要素、symbol 要素、および defs 要素はすべて、さまざまな程度の再利用機能を提供しますが、各要素の特性はわずかに異なる場合があります。たとえば、g 要素は直接レンダリングされます。 、シンボルと定義は直接レンダリングされず、シンボルには viewBox 属性が含まれており、新しいビュー ウィンドウが作成されます。

通常、id 属性は defs で定義された要素に割り当てられ、使用される場合には直接使用されます。要素に応じて、これらの定義はさまざまな場所で使用できます。たとえば、次のプログレッシブ カラーは属性として使用されます:

コピー コード。

コードは次のとおりです:

xmlns="http://www.w3.org/2000 /svg"version=" 1.1">
先祖の 'defs' 要素内のローカル URI 参照。​​



🎜>> ;
fill="url(#Gradient01)"/>


use 要素を使用して、グラフィック関連要素の定義をドキュメントにリンクできます。例:

コードをコピー

コードは次のとおりです:

xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www. w3.org/ 1999/xlink">

ExampleUse01-Simplecaseof'use'ona'rect'



fill="none "ストローク="blue"ストローク幅=".2"/>



ここでは xlink 名前空間が使用されていることに注意してください。ほとんどのビューアはこれを使用しなくても正しく表示されますが、一貫性を保つために、xlink 名前空間を 要素で定義する必要があります。

参照使用要素
svg、シンボル、g、単一グラフィック要素、および use 要素は、基本的に use 要素によってテンプレート オブジェクトとして参照できます (初期化など)。 use によって参照されるグラフィックス コンテンツは、指定された場所にレンダリングされます。 image 要素とは異なり、use 要素はドキュメント全体を参照できません。
use 要素には x、y、width、height 属性もあります。これらの属性は省略できます。省略しない場合、参照されたグラフィック コンテンツの座標または長さは現在のユーザー座標空間にマッピングされます。

use 要素の機能は、参照されたオブジェクトを独立した非パブリック DOM ツリーにディープ コピーすることと同等であり、このツリーの親ノードは us​​e 要素です。これは非パブリック DOM ノードですが、本質的には DOM ノードであるため、参照されたオブジェクトのすべての属性値、アニメーション、イベント、CSS 関連の設定などがコピーされて引き続き機能し、これらのノードはまた、要素の use Relevant 属性を継承し、先祖を使用します (参照される要素は深いコピーであることに注意してください。これらのコピーされた要素は元の要素とは何の関係もないため、参照される要素の祖先ノードの属性はここでは継承されません)。これらのノード自体が関連 (CSS) プロパティであり、継承されたプロパティもオーバーライドする場合、これらは通常の DOM ノードと一致するため、use 要素で "visibility:hidden" を使用する場合は、必ずしも機能するとは限らないので注意してください。ただし、この部分のノードは公開されていないため、DOM 操作時に use 要素しか表示されず、操作できるのは use 要素のみです。

視覚効果の観点から見ると、use 要素はプレースホルダーに似ています。レンダリング後の視覚効果は、参照されたオブジェクトを使用して直接レンダリングした場合と同じです。
1.use 要素参照。シンボル要素
この場合、視覚効果は次と同等です。
(1) use 要素を g 要素に置き換えます。
(2) use を x、y、width、 height, )参照されたシンボル要素を svg 要素に置き換えます。この svg 要素は、use 要素の width 属性と height 属性を明示的に使用します (これらの属性のない use 要素は 100% になります)。参照されたシンボル要素の内容が、置き換えられた svg にディープコピーされます。

2. use 要素は svg 要素を参照します

この場合、視覚効果は次と同等です。(1) use 要素を (2) x、y、width、height、xlink:href を除くすべての use 属性を g 要素に移動します。 (3) use の x、y 属性を translation(x, y) に変更して追加します。 to g 要素のtransform属性は最後です;
(4) コンテンツを含む参照されたsvg要素をコピーします。このsvg要素はuse要素のwidth属性とheight属性を明示的に使用します(use要素は元の値を使用します)。これらの属性がない場合);

3. その他の状況

これらの場合の視覚効果は以下と同等です:
(1) use 要素を g に置き換えます。要素; (2) use を x、y、width、height、xlink で分割: href 以外のすべての属性を g 要素に移動します。(3) use の x、y 属性をtranslate( x、y) を g 要素のtransform属性の末尾に追加します。(4) 参照要素をコピーします。

以下の例の視覚効果を見てください。



コードをコピーします

コードは次のとおりです:

xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org /1999/xlink"> ExampleUse03-'use'witha'transform'attribute

fill="none"ストローク="blue"ストローク幅=".2"/ >
transform="translate(20, 2.5)rotate(10)"/>




下の図の外観は上の図と同じです
:

コードをコピーします

コードは次のとおりです:

xmlns="http://www.w3.org/2000/svg"version= "1.1"> ExampleUse03-'use'witha'transform'attribute

fill="none"ストローク="blue"ストローク幅="。 2"/>

実用的なリファレンス:
スクリプト インデックス: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開発センター: https://developer.mozilla.org/en/SVG
人気のリファレンス: http://www.chinasvg.com/
公式ドキュメント: http://www.w3.org/TR/SVG11/