<g>
div element
와 같은 기능을 한다고 생각하면 됩니다. g
에 속한 엘리먼트의 공통 속성을 작성 할 수 있습니다. 각 엘리먼트에 이벤트를 설정하지 않고 <g>
에 작성하면 한번에 이벤트 설정이 가능합니다. 시멘틱적으로 하나의 그룹을 만들어 시멘틱을 부여할 때 사용합니다.
위 코드와 같이 <g>
안에 모든 stroke
는 <g>
에서 지정해준 blue
로 적용됩니다.
위 코드와 같이 <g>
에서 stroke
를 지정해주었더라도 circle
에서 stroke
속성을 다시 지정하게 되면 red
로 지정됩니다. 이는 div
속성과 유사하다고 생각하시면 됩니다.