4.グループ化

基本図形の例では、ひとつひとつの図形を座標で指定して表示していた。
たとえば、矩形を円を２つ並べるときには次のように２つずつの rect と circle を指定している。

    <rect x="20" y="20" width="60" height="100" 
        fill="orange" opacity="0.5" />
    <circle cx="80" cy="120" r="40" 
        fill="pink" opacity="0.5" />

    <rect x="140" y="20" width="60" height="100" 
        fill="orange" opacity="0.5" />
    <circle cx="200" cy="120" r="40" 
        fill="pink" opacity="0.5" />

グループ（g）

これはかなり面倒くさい。横にずらすのにもう一度タグを書かないといけないのは ちょっとやりきれない。
こういう場合は、グループ化（g）を使う。

    <g>
        <rect x="20" y="20" width="60" height="100" 
            fill="orange" opacity="0.5" />
        <circle cx="80" cy="120" r="40" 
            fill="pink" opacity="0.5" />
    </g>
    <g transform="translate(120,0)">
        <rect x="20" y="20" width="60" height="100" 
            fill="orange" opacity="0.5" />
        <circle cx="80" cy="120" r="40" 
            fill="pink" opacity="0.5" />
    </g>

グループ（g）は、複数の図形をひとまとまりにグループ化できるタグである。
座標変換の transform 属性を使い、translate で xy 軸の移動をしている。

シンボル（symbol）と参照（use）

グループ化した図形を複数表示するためには、シンボル（symbol）を作成した後 id を指定して、 use タグで参照させるようにするとよい。

    <symbol id="group">
        <rect x="0" y="0" width="60" height="100" 
            fill="orange" opacity="0.5" />
        <circle cx="40" cy="100" r="40" 
            fill="pink" opacity="0.5" />
    </symbol>
    <use xlink:href="#group" transform="translate(20,20)" />
    <use xlink:href="#group" transform="translate(140,20)" />

グループ（g）の場合は、画面に表示される。
シンボル（symbol）の場合は、画面に表示されない。
という違いがある。

定義（defs）

グループ（g）の場合でも、定義（defs）タグに入れておくと表示されない。
次の例では、defs タグの中に g タグでグループ化しておいて、use で参照させている。

    <defs>
        <g id="group">
            <rect x="0" y="0" width="60" height="100" 
                fill="orange" opacity="0.5" />
            <circle cx="40" cy="100" r="40" 
                fill="pink" opacity="0.5" />
        </g>
    </defs>
    <use xlink:href="#group" transform="translate(20,20)" />
    <use xlink:href="#group" transform="translate(140,20)" />

次にもう少し詳しくグループ（g）を見てみよう。

next