SVGの構造化、グループ化、バインド-要素、、、および

SVGは、オブジェクトを定義およびグループ化したり、将来それらを参照したりできる特別な要素を使用して、ドキュメントを構造化する機会を提供します。 クリーンで読みやすい状態に保ちながら、コードの再利用を簡素化します。 この記事では、これらの要素、およびそれらの違いと利点を調べます。

<g>要素を使用したグループ化

<g>要素は、関連するグラフィック要素のセットを論理的にグループ化するために使用されます。 これは、グラフィックエディターでのオブジェクトのグループ化と比較できます。



<g>要素は、そのすべてのコンテンツをグループに結合します。 原則として、彼には識別子が割り当てられ、それによって将来的に控訴が行われます。 <g>要素に適用されるスタイルは、そのすべての子孫にも適用されます。 これにより、スタイルと変換を設定できるだけでなく、オブジェクトのグループ全体にインタラクティブ機能とアニメーションをすぐに追加できます。



例として、SVGで描かれた鳥を使用します。 これは、円とパスで記述されたいくつかの個別の図で構成されています。 [あいまいな理由で、著者は円を使用することを約束したものの、円を使用するのではなく、方法で円を説明しました。 理由を聞かないでください。 直しました。 理由を聞かないでください。 - あたり 。]







コードペンの例



Illustratorでそのような鳥を描いたとしましょう。 ある場所から別の場所に移動する必要がある場合は、各要素を個別に移動できないため、オブジェクトのグループ化によりこのタスクが簡素化されます。 SVGでのグループ化はほぼ同じことを行います。 上記の例では、鳥全体の一般的なグループ（id = "bird"）に加えて、頭と体を別々に定義するサブグループ（id = "body"、id = "head"）も識別しました。



#bodyグループの塗りつぶしの色を変更すると、グループ内のすべての要素の塗りつぶしが変更されます。 とても便利です。 [塗りつぶしの色が明示的に設定されていない要素について話している。 たとえば、同じ#bodyで、＃wing要素には独自の色があります。 - あたり 。]



要素のグループ化は、ドキュメントの整理と構造化だけでなく、非常に便利です。 SVGグラフィックスにインタラクティブ機能を追加したり、いくつかの変換を設定したりする場合、特に役立ちます。 要素をグループ化すると、要素の相対的な位置を維持しながら、要素を移動、拡大縮小、または回転させることができます。



したがって、グループ化された鳥の場合、CSSを1行だけ使用してスケーリングできます。

 #bird {transform: scale(2);}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グループ化により、インタラクティブ機能を実装する際の利便性が向上します。 鳥全体にマウスイベントを掛けて、全体として反応させることができます。 これは、各要素に対して個別に同じことを行うよりもはるかに便利です。



<g>要素には別の重要で興味深い機能があります。スクリーンリーダーで画像を処理できるようにする<title>および<desc>タグを含めることができます[障害を持つ人向けのテキスト再生プログラム。 この用語の大規模で適切な翻訳が見つかりませんでした。 - ごと 。]; また、コードは人間にとって読みやすくなります。 使用例：

 <g id="bird"> <title>Bird</title> <desc>An image of a cute little green bird with an orange beak.</desc> <!-- ... --> </g>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

<use>で要素を再利用する

グラフィックを使用する場合、繰り返し要素が使用される状況を見つけることができます。 この場合のグラフィックエディターでは、通常、コピーと貼り付けの方法が使用されます。これは、要素を最初から作成するよりも便利です。



SVGでは、<use>要素が同様の機能を実装します。 個々の要素と要素のグループの両方を再利用するために使用できます。



<use>要素は、xおよびy座標、高さ、幅、ソース要素へのリンク（xlink：href）を属性として受け入れます。 参照はオブジェクトの識別子です。



たとえば、コードをコピーする代わりに別の鳥を追加する場合は、<use>タグを使用できます。

 <use x="100" y="100" xlink:href="#bird" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードペンの例



xlink：href属性では、外部ファイルにある任意のSVG要素を参照できることに注意してください。 これは、整理（たとえば、再利用可能なコンポーネントを含むファイルを持つことができます）または頻繁に使用されるファイルのキャッシュに使用すると非常に便利です。



鳥が別のanimals.svgファイルで作成されたとしましょう。 この場合、次のように参照できます。

 <use x="100" y="100" xlink:href="path/to/animals.svg#bird" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

<use>の外部SVGへのリンクは、IEのほとんどのバージョン（IE 11より前）では機能しないことに注意してください。 この制限を回避する方法を説明したChris Coyierの記事を読むことをお勧めします。



最も注意深い読者は、<use>要素に与えられた座標がSVG画像全体の原点から数えられないことに気付いたに違いありません。 これは実際には、変換属性の短縮形です。 次の2行は同等です。

 <use x="100" y="100" xlink:href="#bird" /> <use xlink:href="#bird" transform="translate(100, 100)" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

簡単に言うと、<use>要素の座標は元の要素に相対的です。 この動作は常に最適であるとは限らず、不利な場合もあります。



<use>のもう1つの欠点は、コピーが元の要素と同じスタイルを使用することです。 スタイルまたは変換を#birdグループに適用すると、これらのスタイルと変換はそのすべてのコピーに適用されます。



ただし、独立した変換を<use>要素に適用できます。 たとえば、次のコード行では、元のサイズの半分のサイズの鳥を再利用できます。

 <use x="100" y="100" xlink:href="#bird" transform="scale(0.5)" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

[この場合、座標系の原理はやや予想外に思われるかもしれません。 また、スケーリングします。 元の要素が画像の端から100ピクセルに配置されている場合、そのようなコピーは端から50ピクセルに配置されます。 xとyが与えられると、これも適用されます。 したがって、元の要素に相対的なコピーの場所に関する単語は完全に正しいとは限りません。 - あたり 。]



変換とは異なり、コピースタイルをオーバーライドすることはできません。 したがって、異なる色の鳥の軍隊を作成する場合、<use>の使用は機能しません（ソース要素が独自のスタイルなしで<defs>内で定義されている場合を除き、次のセクションでさらに詳しく説明します）。



<use>要素を使用すると、SVG画像に既に表示されている要素を再利用できます。 要素を表示せずに定義し、必要なときに適切な場所に描画する場合は、<defs>要素が役立ちます。

<defs>での保存アイテムの再利用

<defs>要素を使用して、定義中に表示されないコンテンツを保存できます。 その中のコンテンツは隠された形式で保存され、他のSVG要素によって使用および表示されると翼で待機します。これは、たとえばパターンでの使用に最適です。



鳥のような要素のグループで始まり、マスクまたはグラデーションで終わるものはすべて<defs>に保存できます。 これは、将来の参照用のテンプレートです。 単独では表示されず、それを使用するエンティティのみが表示されます。



次は、グラデーションが最初に決定され、次に四角形を塗りつぶすために使用される例です。

コードペンの例



[著者は不幸なミスを犯した。長方形の高さと幅は示されていなかった。 - あたり 。]



<defs>内で線形グラデーションを定義することにより、どこでも使用された場合にのみ、それ自体が突然表示されないようにします。



前のセクションでは、<use>要素の2つの欠陥について言及しました。

1. 新しい要素の位置は、元の要素を基準にして設定されます。
2. コピーでソースアイテムのスタイルを上書きすることはできません。

さらに、ソース要素は単独で表示されます。



これらの欠点はすべて、<defs>を使用して回避できます。 それだけでなく、元の要素が表示されないだけでなく、<defs>内で定義された要素を使用する場合、各インスタンスの位置は座標系の原点に対して相対的に設定されます。



次の例では、ツリーを描画します[そして、バイナリを忘れます！ - トランス 。]。 幹と葉で構成されています。 リーフはid = "leaves"のグループに収集され、トランクと一緒にid = "tree"のより一般的なグループに含まれます。



出力では、ツリーは次のようになります。







[残念なことに、コードは作者によって短縮され、ほとんどの葉を失いました。 残っているものは、ある種の異質な産業景観の一部を思い出させます。 - あたり 。]



グループ#treeを<defs>要素でラップすると、ツリーは表示されなくなります。



これで、ツリーはテンプレートとして機能します。 他の要素と同様に、<use>要素で使用できます。 唯一の違いは、x座標とy座標が原点を基準にしていることです。



例としてミニフォレストを描きましょう。

 <use xlink:href="#tree" x="50" y="100" /> <use xlink:href="#tree" x="200" y="100" /> <use xlink:href="#tree" x="350" y="100" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、各ツリーは原点を基準に配置されています。この場合、画像の左上隅が撮影されます。 ツリーは、互いに独立して、テンプレート内の場所から配置されます。



<defs>で定義された要素を再利用する場合、元のテンプレートにこれらのスタイルが定義されるまで、各ツリーに個別のスタイルを適用できます。 <defs>内のツリーに独自のスタイルがある場合、それらを再定義することはできません。 したがって、<defs>は、必要に応じて使用および色付けされる基盤を定義するのに最適です。 <defs>なしで<use>のみを使用すると、このような柔軟性を実現することは不可能です。



<defs>内の要素は表示されないことに注意してください。つまり、display = "none"プロパティが設定された<g>要素とまったく同じように動作します。 ただし、<defs>の子孫は常にソースツリーで表されます[SVGオブジェクトツリーのスピーチ、と思います。 -Trans 。]、および他の要素は常にそれらを参照できます。 したがって、<defs>要素（またはその子孫）のdisplayプロパティの値は、このプロパティがnoneに設定されていても、他の要素がそれを参照することを妨げません。



[著者がこの段落で何を言おうとしていたのかを正しく理解しているかどうかは不明。 <defs>内の要素に対してdisplay = "none"を設定しようとしましたが、この要素は表示を停止しましたが、これは論理的なようです。 どうやら、<defs>自体をdisplay = "none"に設定でき、何も変わらないという事実について話しているようです。 次のセクションでは、これをより明確に説明します。 念のため、元の段落を追加します。 - あたり 。]

<symbol>を使用した要素のグループ化

<symbol>要素は<g>に似ています：要素をグループ化する機能も提供します。 2つの主な違いを区別できます。

1. <symbol>要素は単独では表示されません。 これは<defs>に似ています。
2. <symbol>要素には、独自のviewBox属性とpreserveAspectRatio属性を含めることができます。 これにより、デフォルトで定義されているようにではなく、希望する方法でビューポート（ビューポート）に収めることができます。

ほとんどの場合、<symbol>は再利用可能な要素（文字）の定義に適しています。 まだ<use>のテンプレートとして機能します。 また、独自のviewBox属性とpreserveAspectRatio属性を使用して、それを参照する<use>要素で指定された長方形のビューポートに引き伸ばすことができます。 <symbol>要素は、<use>要素が呼び出されるたびに新しい表示領域を定義することに注意してください。



これは、<symbol>要素の優れた機能です。 これにより、ビューポートに依存しない要素を定義できます。 それらは常に指定された方法で表示されます。



しかし、このすべての魔法を理解するには、viewBox属性とpreserveAspectRatio属性が一般的にどのように機能するかを知る必要があります。 Chris Coyierには、 <symbol>要素が優れている理由、アイコンの実装に適した理由、および一般的な使用方法を説明するこのトピックに関する記事があります。



ビューポート、viewBox、preserveAspectRatioに関する広範な記事をすでに書いています。 チェックアウト： SVG座標系と変換について（パート1）-ビューポート、viewBox、およびpreserveAspectRatio



displayプロパティは<symbol>要素には適用されないことに注意してください。 display = "none"以外に設定しても、アイテムは表示されません。 また、display = "none"プロパティがその要素またはその子孫に設定されている場合でも、<symbol>要素を参照できます。

おわりに

これらの要素はすべてSVG構造コンテナであるため、要素を簡単に再利用しながら、コードを簡潔かつ明確にすることができます。 これらの各要素には独自のスコープがあります。 これで、それぞれが何をし、どのように互いに異なるかがわかったので、状況に応じてどちらを使用するかを決定できます。



この記事をお楽しみいただき、お役に立てば幸いです。 読んでくれてありがとう！

翻訳者から

一部の場所での翻訳は非常に無料ですが、意味や内容を損なうものではありません。 オリジナルに直接関係のないものはすべてノートに含まれています。 コードでは、いくつかの場所で小さな編集を行いましたが、これはまったく重要ではないか、メモに記載されています。



提案、要望、コメントは、いつものようにPMで。