SVG 곡선 글자 방향 바꾸기, textPath의 side 사용법

곡선 반대편에 놓으려면 side를 바꾼다

SVG로 곡선 라벨을 만들다가 글자가 원하는 쪽에 놓이지 않는다면 textPath의 side가 후보가 된다. 기본값은 left다. right로 바꾸면 글자를 배치할 때 경로의 진행 방향을 반대로 사용한다.

여기서 left와 right는 화면의 왼쪽·오른쪽이 아니라 경로가 나아가는 방향을 기준으로 한다. SVG 2의 텍스트 배치 알고리즘도 right일 때 배치용 경로를 뒤집도록 정의한다. 원본 d 데이터를 다시 쓰는 작업과 구별된다.

이 기능은 곡선의 양쪽을 바꾸는 데 쓰인다. 기울어진 글자를 언제나 똑바로 세워 주는 자동 보정은 아니다. 원래 경로의 진행 방향과 곡률에 따라 반전 후 글자의 방향도 달라진다.

같은 곡선을 유지하고 속성만 바꾸는 예

다음은 짧은 곡선에 라벨을 놓는 예제다. side="left"와 side="right"를 번갈아 적용하면 경로 데이터는 유지하면서 배치 방향을 비교할 수 있다.

<svg viewBox="0 0 320 180" xmlns="http://www.w3.org/2000/svg">
  <path id="curve" d="M 30 100 Q 160 20 290 100"
        fill="none" stroke="silver" />
  <text font-size="20" text-anchor="middle">
    <textPath href="#curve" startOffset="50%" side="right">
      Curve label
    </textPath>
  </text>
</svg>

startOffset="50%"는 경로 길이의 중간을 기준 위치로 삼는다. 여기에 text-anchor="middle"을 주면 문자열의 중점이 그 위치에 온다. 경로의 중간이라는 뜻이지 SVG 화면 전체의 중앙이라는 뜻은 아니다.

방향·위치·정렬을 따로 조절해야 한다

글자가 너무 왼쪽에서 시작하는 문제와 곡선 반대편으로 넘어가야 하는 문제는 다른 속성으로 해결한다. 시작점만 바꾸려고 side를 수정하면 읽는 방향까지 달라질 수 있다.

바꾸려는 것	속성	작동 기준
곡선의 어느 쪽에 놓이는가	side	경로의 진행 방향에 상대적인 left·right다.
경로의 어디를 기준으로 시작하는가	startOffset	경로 시작부터의 거리나 비율이다.
그 위치에 문자열의 어느 부분을 맞추는가	text-anchor	start·middle·end 정렬이다.

위 예제에서 글자가 경로 중간에 놓이지만 반대편을 향한다면 side를, 방향은 맞지만 위치가 어긋난다면 startOffset을 바꾸는 순서가 이해하기 쉽다. 원형 배지에서도 ‘안쪽’과 ‘바깥쪽’을 속성 이름에 고정해 외우기보다 원본 경로의 방향부터 보아야 한다.

Safari의 새 지원은 프리뷰부터다

10월 22일 공개된 Safari Technology Preview 255는 SVG textPath의 side 지원을 추가했다. 정식 Safari 전체의 지원 여부를 뜻하는 발표는 아니다. MDN도 side를 사용 범위가 제한된 실험적 기능으로 표시한다.

특히 textPath 자체가 널리 지원된다는 설명을 side까지 적용해서는 안 된다. 운영 브라우저에서 방향 반전이 필요한 디자인이라면 속성 지원을 따로 확인해야 한다. 지원이 부족한 환경까지 같은 배치가 필요할 때는 원하는 방향의 별도 경로를 준비해 참조하는 방식도 선택할 수 있다.

먼저 글자의 방향을 side로 정하고, 위치와 정렬을 startOffset·text-anchor로 맞춘다. 그다음 실제 이용자가 쓰는 브라우저에서 같은 결과가 나오는지를 확인하는 순서다.