inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

SVG 마스터

곡선을 따라 글자 쓰기

곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?

285

hweejin_cha

작성한 질문수 5

0

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <style>
        .svg-circleText {font-size: 1.5rem; font-weight: bold; fill: red;} 
        .svg-circleText tspan {display: inline-block; margin-right: 30px;}
    </style>
    <defs>
        <circle id="text-circle" cx="250" cy="250" r="240" stroke="blue" fill="transparent" />
    </defs>
    
    <text x="20" y="20" class="svg-circleText">
        <textPath href="#text-circle">
            <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan>
            <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan>
            <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan>
        </textPath>
    </text>
</svg>

위처럼 circle로 하고싶은데 나오지 않습니다. 각각 따로 하면 circle도 잘 보이고 글자도 잘 보입니다. 하지만 id와 textPath를 사용하여 연결하면 보이지 않습니다ㅠ

HTML/CSS svg

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

hweejin_cha님께서 질문하신 ‘곡선에 따라 글자 쓰기에서 path 대신 circle은 안되나요?‘에 대해 답변드리겠습니다.

SVG에서 <textPath> 요소를 사용하여 텍스트를 곡선이나 원형태로 디스플레이하시려는 시도는 매우 창의적입니다. 하지만, <textPath> 요소는 현재 <path> 요소에 의해 정의된 경로에만 텍스트를 맵핑할 수 있습니다. 이것은 SVG 표준에 명시되어 있으며, <circle>, <rect> 등의 다른 SVG 요소들에는 직접적으로 적용되지 않습니다.

이러한 상황에서 문제를 해결하기 위한 방법 중 하나는 일러스트레이터와 같은 벡터 그래픽 편집기를 사용하여 원하시는 원형 경로를 <path> 형식으로 변환하는 것입니다. 혹은 웹에서 사용할 수 있는 SVG 변환 도구를 사용하여 <circle> 요소를 <path>로 변환할 수 있습니다. 이렇게 하면, 생성된 <path>에 텍스트를 맵핑할 수 있게 됩니다.

또한, 관련하여 유용한 정보를 담고 있는 기존 답변을 추천드립니다:

  • SVG 태그 질문!: 여기서는 SVG 요소의 크기에 대한 조정과 viewBox 설정에 대해 설명하고 있습니다. 비록 직접적으로 hweejin_cha님의 질문과 관련이 없을 수 있지만, SVG 요소를 조작하는 데 있어 기본적인 이해를 돕는 내용을 포함하고 있습니다.

위의 정보가 hweejin_cha님께 도움이 되길 바라며, 추가적으로 궁금한 사항이 있다면 더 자세한 질문을 주시기 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

0

hweejin_cha

감사합니다! path만 되는군여

svg 직접 그리기

0

59

1

SVG 파일 CSS 애니메이션

0

215

1

선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?

0

585

1

atom 서비스 종료, emmet 설치안됨

0

1425

1

SVG 태그 중 foreignObject 관련하여 질문드립니다.

0

1564

1

마스크가 안돼요..

0

431

2

강의 노션

0

404

1

강의 노션

0

341

1

마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상

1

237

1

path 를 x ,y로 이동

0

287

1

같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?

0

363

1

마스크2 돋보기 질문

0

391

1

압축에 관하여

0

280

1

svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요

0

418

2

패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ

0

514

1

글씨 깨짐

0

434

1

smil 무한반복 질문

0

236

1

SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)

0

333

1

class name 정의 하실때 bem 방법 사용하시나요??

0

332

1

마스크 2 에서 질문있습니다.

0

264

1

path로 그린 svg 화면 꽉채우기

0

882

1

svg 파일 불러오기

0

368

1

svg 태그 질문!

0

233

1

질문드립니다.

0

248

1