先ほどたくさんのグラフィック要素を紹介しましたが、多くのグラフィック自体が同じ場合、毎回新しいグラフィック要素を定義する必要がありますか?グラフィックを共有できますか?これがこのセクションの焦点、つまり SVG 要素の再利用です。
結合 g 要素
g 要素は、この方法で関連するグラフィック要素のグループを全体に結合するコンテナーであり、この全体を操作できます。この要素は通常、desc 要素および title 要素と組み合わせて使用して、ドキュメントに関する構造情報を提供します。通常、適切に構造化されたドキュメントは読みやすく、効率的に表示されます。小さな例を見てみましょう:
version="1.1"width="5cm"height="5cm">
2 つのグループ、それぞれ 2 つの長方形< ;/desc>
🎜>
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」属性は意味がありません。
次の変更されたコードは、シンボルの使用方法を示しています: