SVG 안에 들어가는 텍스트 중앙 정렬하기

SVG - TEXT

svg 안에 text 요소를 넣을 수 있는데
text를 넣을 때에 중앙 정렬을 해주기 위해서는 여러가지가 필요합니다.
우선 svg 안에 들어가는 text에 대한 참고 사이트 링크를 걸겠습니다.
svg 텍스트 요소

text-anchor

text에 사용할 수 있는 속성으로 text-anchor가 있습니다.
text의 중심점을 정하는 요소인데 middle로 설정 해줘야 텍스트의 중앙에 오게됩니다.
text-anchor 속성

dominant-baseline

text에 사용하는 속성으로 dominant-baseline이 있습니다.
다양한 속성이 사용되지만 중앙으로 정렬하기 위해서는 central 값을 사용해줘야 합니다.
middle 속성도 존재하지만 텍스트의 특성상 텍스트의 정중앙이 되지않습니다.
text-anchor 속성

x , y

text요소를 정중앙으로 오게하기 위해서는 absolute를 중앙에 오게 하듯이 x와 y의 위치를 정해야합니다.
x=50%; , y=50%;를 사용해서 앞에 요소들을 사용한 텍스트를 중앙에 오게 할 수 있습니다.

참고 사이트

svg 텍스트 요소
text-anchor 속성
text-anchor 속성
svg의 text 요소 중앙에 정렬 하기