HTML5 SVG 2Dはじめに7-SVG要素の再利用と参照

著者：Eve Cole 更新時間：2025-04-12 02:48:01

以前に多くのグラフィック要素を紹介しました。多くのグラフィック要素が同じ場合、毎回新しい要素を定義する必要がありますか？グラフィックを共有できますか？これがこのセクションの焦点です - SVG要素の再利用。

組み合わせ-G要素

G要素は、関連するグラフィック要素のグループを全体に組み合わせたコンテナです。これにより、この全体で動作できます。この要素は通常、DESCおよびタイトル要素と組み合わせて使用して、ドキュメントの構造情報を提供できます。よく構造化されたドキュメントは通常、十分に読みやすく、レンダリングされます。小さな例を参照してください：

<svgxmlns = "http://www.w3.org/2000/svg"

version = "1.1" width = "5cm" height = "5cm">

<desc> twogroups、exloftworectangles </desc>

</g>

</g>

<！ - canvasing'rect'elementのshowoutline->

<rectx = "。01cm" y = "。01cm" width = "4.98cm" height = "4.98cm"

fill = "none" stroke = "blue" stroke-width = "。02cm"/>

</svg>

注意すべきいくつかのポイント：

1.xmlns = http：//www.w3.org/2000/SVGは、SVG要素全体のデフォルトの名前空間がSVGであることを示します。これは、あいまいさがない場合に省略できます。 SVGドキュメントはXMLドキュメントであるため、XMLネームスペースに関連するルールがここに適用されます。たとえば、SVGで表示されている指定された名前空間を指定したり、名前空間にエイリアスを提供したりできます。

2.G要素はネストできます。

3.組み合わせたグラフィック要素は個々の要素と同じであり、ID値を指定できます。このようにして、必要に応じて（要素のグループのアニメーションや再利用など）、このID値を参照することができます。

4.グラフィック要素のセットを組み合わせると、この一連の要素（塗りつぶし、ストローク、変換など）の関連属性を設定できます。これは、組み合わせが使用されるシナリオでもあります。

テンプレート - シンボル要素

シンボル要素は、グラフィックテンプレート（テンプレートには多くのグラフィックを含めることができる）を定義するために使用されます。これは、使用要素によってインスタンス化できます。テンプレートの関数はG要素に非常に似ており、どちらもグラフィックオブジェクトのセットを提供しますが、いくつかの違いがあります。 G要素との違いは次のとおりです。

1.シンボル要素自体はレンダリングされず、シンボルテンプレートのインスタンスのみがレンダリングされます。

2。シンボル要素には、viewboxおよびpreserveaspectratioの属性を持つことができます。これにより、シンボルがグラフィック要素をスケーリングできます。

レンダリングの観点から、シンボル要素に似た要素は、マーカー（矢印とマーカーの定義）とパターン（色の定義）要素です。これらの要素は直接レンダリングされません。それらの使用は基本的に使用要素によってインスタンス化されます。このため、「ディスプレイ」属性がシンボルに対して無意味であるというのはまさにそのためです。

次の修正コードは、シンボルの使用方法を示しています。

<svgxmlns = "http://www.w3.org/2000/svg"

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

version = "1.1" width = "5cm" height = "5cm">

<desc> twogroups、exloftworectangles </desc>

</シンボル>

</g>

<usexlink：href = "＃group1"ターゲット= "_ blank" rel = "nofollow">

<！ - canvasing'rect'elementのshowoutline->

<rectx = "。02cm" y = "。02cm" width = "4.96cm" height = "4.96cm"

fill = "none" stroke = "blue" stroke-width = "。02cm"/>

</svg>

-defs要素を定義します

SVGを使用すると、オブジェクトのセットを定義してから再利用できます（グラフィックオブジェクトだけではないことに注意してください）。最も一般的な例は、勾配色を定義し、塗りつぶし属性を他のグラフィックオブジェクトに割り当てることです。グラデーションカラー定義はレンダリングされないため、このタイプのオブジェクトはどこにでも配置できます。再利用はグラフィカルオブジェクトによく見られることが多く、定義するときに直接レンダリングしたくありませんが、代わりに参照をレンダリングしたいと考えています。これは、defs要素を使用して実装できます。

一般的に言えば、推奨されるアプローチは、参照されたオブジェクトを可能な限りDEFS要素に配置することです。これらのオブジェクトは通常、AltglyphDef、Clippath、Cursor、Filter、Marker、Mask、Pattern、線形勾配、放射状勾配、シンボル、グラフィカルオブジェクトです。これらのオブジェクトをDEFS要素で定義することは理解しやすいため、アクセシビリティが向上します。

実際、コンテナオブジェクトとしてG要素、シンボル要素、およびdefs要素はすべてさまざまな程度に再利用を提供しますが、各要素の特性はわずかに異なる場合があります。たとえば、G要素は直接レンダリングされ、シンボルとdefは直接レンダリングされません。

通常、defsで定義されている要素にはID属性が割り当てられ、使用される場所で直接使用されます。要素に応じて、これらの定義は、属性として次のプログレッシブ色など、さまざまな場所で使用できます。

<svgwidth = "8cm" height = "3cm"

xmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">

<desc> localurireferences withinancestor's'defs '要素。</desc>

<defs>

</lineargradient>

</defs>

<rectx = "1cm" y = "1cm" width = "6cm" height = "1cm"

fill = "url（＃gradient01）"/>

</svg>

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

<svgwidth = "10cm" height = "3cm" viewbox = "0010030"バージョン= "1.1"

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

<desc> empleus01-simplecaseof'use'ona'rect '</desc>

<defs>

</defs>

<rectx = "。1" y = "。1" width = "99.8" height = "29.8"

fill = "none" stroke = "blue" stroke-width = "。2"/>

</svg>

Xlinkネームスペースの使用に注意してください。ほとんどの視聴者は、このアイテムもそれなしでは正しく表示しますが、一貫性のために、Xlinkネームスペースは<SVG> </SVG>要素で定義する必要があります。

見積使用要素

SVG、シンボル、G、単一のグラフィック要素、および使用要素は、使用要素によってテンプレートオブジェクトとして基本的に参照されます（初期化されます）。使用によって参照されるグラフィックコンテンツは、指定された場所でレンダリングされます。画像要素とは異なり、使用要素はドキュメント全体を参照することはできません。

使用要素には、x、y、幅、高さの属性もあります。これらの属性は省略できます。省略されていない場合、参照されたグラフィックコンテンツ座標または長さは、現在のユーザー座標スペースにマッピングされます。

使用要素のアクションプロセスは、参照されたオブジェクトを独立した非公開DOMツリーに深くコピーすることと同等です。このツリーの親ノードは、使用要素です。非公開のDOMノードですが、本質的にDOMノードです。したがって、参照されるオブジェクトのすべての属性値、アニメーション、イベント、およびCSS関連設定がコピーされ、引き続き機能します。さらに、これらのノードは、使用要素と使用祖先の関連属性も継承します（参照される要素は深いコピーであり、これらのコピーされた要素は元の要素とは何の関係もないため、参照される要素の祖先ノードの属性はここでは継承されません）。これらのノード自体に関連する（CSS）属性がある場合、通常のDOMノードと一致する継承された属性も上書きされるため、可視性を使用する場合は注意してください。ただし、これらのノードは非パブリックであるため、DOM操作では使用要素のみが表示されるため、使用要素のみを操作できます。

視覚効果の観点から見ると、使用要素はプレースホルダーのようなものであり、レンダリング後の視覚効果は参照オブジェクトで直接レンダリングするのと同じです。

1.使用要素は、シンボル要素を指します

この場合、視覚効果は以下と同等です。

（1）使用要素をG要素に変更します。

（2）x、y、幅、高さ、xlink：hrefを除くすべての使用特性をG要素に移動します。

（3）使用のxおよびy属性を翻訳（x、y）に変換し、g要素の最後の変換属性に追加します。

（4）参照されたシンボル要素をSVG要素に置き換えます。このSVG要素は、使用要素の幅と高さの属性を明示的に使用します（使用要素にはこれらの属性がありません。これは100％です）。

（5）参照されたシンボル要素のグラフィックコンテンツを置き換えられたSVGに深くコピーします。

2。使用要素は、SVG要素を指します

この場合、視覚効果は以下と同等です。

（1）使用要素をG要素に変更します。

（2）x、y、幅、高さ、xlink：hrefを除くすべての使用特性をG要素に移動します。

（3）使用のxおよびy属性を翻訳（x、y）に変換し、g要素の最後の変換属性に追加します。

（4）コンテンツを含む参照されているSVG要素をコピーします。このSVG要素は、使用要素の幅と高さの属性を明示的に使用します（使用要素にはこれらの属性がなく、元の値を使用します）。

3。その他の状況

これらの場合の視覚効果は、次のものと同等です。

（1）使用要素をG要素に変更します。

（2）x、y、幅、高さ、xlink：hrefを除くすべての使用特性をG要素に移動します。

（3）使用のxおよびy属性を翻訳（x、y）に変換し、g要素の最後の変換属性に追加します。

（4）参照される要素をコピーします。

次の例の視覚効果を参照してください。

<svgwidth = "10cm" height = "3cm" viewbox = "0010030"バージョン= "1.1"

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

<desc> empleus03-'use'witha'transform'attribute </desc>

<defs>

</defs>

<rectx = "。1" y = "。1" width = "99.8" height = "29.8"

fill = "none" stroke = "blue" stroke-width = "。2"/>

<usexlink：href = "＃myrect"

transform = "translate（20,2.5）回転（10）"/>

</svg>

次の図は、上記の図と同じように見えます。

<svgwidth = "10cm" height = "3cm" viewbox = "0010030"

xmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">

<desc> empleus03-'use'witha'transform'attribute </desc>

<rectx = "。1" y = "。1" width = "99.8" height = "29.8"

fill = "none" stroke = "blue" stroke-width = "。2"/>

</g>

</svg>

実用的なリファレンス：

スクリプトインデックス：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/