svg: text-anchor

svg는 x,y 의 좌표를 가지고 위치를 잡습니다.

이때 text를 중앙에 위치시키고 싶을 때 유용하게 쓸 수 있는 방법이 text-anchor를 이용하는 방법입니다.

 

text에서 좌표를 줄때, text의 왼쪽, 중앙, 오른쪽 중 어디를 기준으로 둘 것인가 할때 쓰입니다.

 

text-anchor의 속성 값

  start : 왼쪽,

  middle : 중앙, 

  end: 오른쪽