<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
<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

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
g
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support