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

<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를 사용하여 연결하면 보이지 않습니다ㅠ

안녕하세요, 인프런 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님께 도움이 되길 바라며, 추가적으로 궁금한 사항이 있다면 더 자세한 질문을 주시기 바랍니다.

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

인프런 커뮤니티 질문&답변