<g>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<g> SVG 요소는 다른 SVG 요소를 그룹화한 컨테이너입니다.

<g> 요소에 적용된 변형 속성은 자식 요소들에서 동작합니다. 그리고 그 특성은 자식 요소에게로 상속됩니다. 이는 또한 다중 요소를 그룹화하여 <use> 요소와 함께 참조될 수 있도록 합니다.

예제

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- g 를 사용하여 현재 속성을 상속합니다. -->
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>

사용 일람

카테고리	컨테이너 요소, 구조 요소
허용된 콘텐츠	순서에 상관없는 다음 요소 중 임의의 개수: 애니메이션 요소 설명 요소 모양 요소 구조 요소 그라데이션 요소 `<a>`, `<clipPath>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

명세서

Specification
Scalable Vector Graphics (SVG) 2 # GElement

브라우저 호환성

BCD tables only load in the browser