<!-- 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 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 属性が継承されていない。