JS/CSS로 타원을 따라 텍스트를 그릴 수 있습니까?

자바 스크립트를 사용하여 HTML5의 타원을 따라 이름을 그릴 수 있습니까? 목표는 첨부 된 이미지와 같이 타원에 임의의 오프셋을 따라 이름을 추가 할 수있게하는 것입니다.JS/CSS로 타원을 따라 텍스트를 그릴 수 있습니까?

Drawing on an oval

출처

2015-01-26 patrickkidd

당신은 단순히 이것을 달성하기 위해 svg의 textPath 요소를 사용할 수 있습니다.

<svg width="300" height="150" viewBox="0 -15 200 130"> 
 
    <path d="M0,50 c0,-65 200,-65 200,0 c0,65 -200,65 -200,0" fill="#645432" /> 
 
    <path id="shape2" d="M0,50 c0,65 200,65 200,0 c0,-65 -200,-65 -200,0" fill="none" /> 
 
    <path id="shape" d="M12,50 c0,-52 180,-52 176,0 c0,52 -180,52 -176,0" fill="#987C54" stroke="#8BAC96" /> 
 
    <text><textPath startOffset="30" xlink:href="#shape">Jonathon</textPath></text> 
 
    <text><textPath startOffset="150" xlink:href="#shape">Sierra</textPath></text> 
 
    <text><textPath startOffset="40" xlink:href="#shape2">Naomie</textPath></text> 
 
    <text><textPath startOffset="170" xlink:href="#shape2">Daniel</textPath></text> 
 
</svg>

출처

2015-01-26 23:13:19

워 .... 아주 멋진, 당신은 – patrickkidd

방법이 경로를 창조 하셨 는가 감사? 너 일러스트 레이터 같은 걸 추적 했니? 나는 SVG 경로를 만드는 것에 익숙하지 않다. – patrickkidd

@patrickkidd - 이것은 벡터 그래픽 툴없이 손으로 작성된 코드입니다. '경로'를 변경하려면 먼저 ['textPath'] (http://www.w3.org/TR/SVG/text.html#TextPathElement) 요소와 그 원리를 이해해야합니다. 그런 다음 벡터 그래픽 도구를 사용하여 모양을 만들 수 있습니다. –

JS/CSS로 타원을 따라 텍스트를 그릴 수 있습니까?

답변

관련 문제