SVG g

<g>

div element와 같은 기능을 한다고 생각하면 됩니다. g에 속한 엘리먼트의 공통 속성을 작성 할 수 있습니다. 각 엘리먼트에 이벤트를 설정하지 않고 <g>에 작성하면 한번에 이벤트 설정이 가능합니다. 시멘틱적으로 하나의 그룹을 만들어 시멘틱을 부여할 때 사용합니다.

위 코드와 같이 <g>안에 모든 stroke<g>에서 지정해준 blue로 적용됩니다.

위 코드와 같이 <g>에서 stroke를 지정해주었더라도 circle에서 stroke속성을 다시 지정하게 되면 red로 지정됩니다. 이는 div속성과 유사하다고 생각하시면 됩니다.

공유하기