본문 바로가기
웹개발/잡다한

svg 내부의 글자를 가운데로 정렬하는 법

by julysein 2021. 9. 30.
728x90

svg 파일을 xd에서 추출하는데 글자가 계속 왼쪽으로 쏠리는 현상이 발생했다

처음에는 이미지 추출할 때 포토샵에서 문제가 있었나 싶어 그걸로 해결하고자 했으나 계속 실패해서 svg 에 css 심는 법을 알아봤다.

다행히 svg는 코드로 이루어진(?) 파일이었고 안에 css를 넣을 수 있었다.

 

이렇게 text가 들어있는 부분에 아래와 같이 입력해 준다

 

<text id="text" transform="translate(309 106)" fill="#191919" font-size="9"  font-weight="700" x="{전체 x의 절반}" y="0" text-anchor="middle" >텍스트</text>

 x에는 상위 x 의 길이의 절반을 입력해주면 된다

이때 설정된 x,y를 기준으로 중앙 선이 생성이 되고 그걸 기준으로  text-anchor="middle" 를 입력하면 text가 중앙배열된다.

728x90