グループの属性

グループ（g）には、座標変換（transform）のほかにも塗りつぶしなどの 指定を行うことができる。

    <!-- set fill color -->
    <g fill="orange" transform="translate(20,20)">
        <rect x="0" y="0" width="60" height="100" 
            opacity="0.5" />
        <circle cx="40" cy="100" r="40" 
            opacity="0.5" />
    </g>
    <!-- set stroke color -->
    <g fill="orange" stroke="red" stroke-width="4"
        transform="translate(120,20)">
        <rect x="0" y="0" width="60" height="100" 
            opacity="0.5" />
        <circle cx="40" cy="100" r="40" 
            opacity="0.5" />
    </g>

g タグに fill 属性や stroke 属性を指定すると、その子にあるタグ（rect, circle）にも 同じ値が設定される。これを継承というが、塗りつぶしなどを統一したい場合に 便利である。
ただし、子にあらかじめ同じ属性が指定してある場合には、そちらが優先される。 継承する場合には、余分な属性を書かないようにする。
（明示的に継承しないことを示すために、"inherit" を指定してもよいだろう）

    <!-- inherit fill color -->
    <g fill="orange" transform="translate(20,20)">
        <rect x="0" y="0" width="60" height="100" 
            opacity="0.5" />
        <circle cx="40" cy="100" r="40" fill="inherit"
            opacity="0.5" />
    </g>
    <!-- no inherit -->
    <g fill="orange" 
        transform="translate(120,20)">
        <rect x="0" y="0" width="60" height="100" 
            opacity="0.5" />
        <circle cx="40" cy="100" r="40" fill="blue"
            opacity="0.5" />
    </g>

この例では、右側の円に fill="blue" を指定しているために、g タグで指定した fill 属性が継承されていない。
previous