자바 스크립트가있는 원 주위의 텍스트

Question

동일한 질문에 대해 Stackoverflow를 검색했지만 내 질문과 조금 다른 모든 질문은 Xcode (iPhone)에 프로그래밍되어 있습니다. Javascript를 사용하고 있지만 어떻게 해결할 수 있는지 알 수 없습니다.

나는 (RaphaelJS에 기초한) 별을 만들었습니다. 그 별은 가변적 인 별점을 가지고 있으므로 8 점을 가진 별일 수도 있지만 9 또는 10 또는 11도 될 수 있습니다. 제 질문은 그 별 주위에 원으로 텍스트를 넣고 싶습니다. 별에 8 점이 있다면 단어마다 고유 한 모든 점 (8 단어)을 갖습니다.

내 문제는 어쩌면 내 질문에 명확히 것을, 일러스트 레이터에 예시 한 : 미래에 (I 이미지와 함께하고있어 지금이 순간에

,하지만 유연하지 I 데이터베이스를 사용하여 별과 단어를 생성합니다). 나는 많은 것을 수색했다. 이 기술이 가능한 모든 기술은 SVG라는 것을 알게되었습니다. 그러나 여러 시간의 시행 착오 끝에 내 이미지와 비슷한 어떤 것이 없었습니다.

Answer 1

좋아, 내가 마지막으로 추가 한 점은 이미지에있는 점을 잊어 버렸지 만 (0123), this은 순수 CSS를 사용하여 노크 한 것입니다. 기본적으로 아이디어는 모든 텍스트가 있다는 것입니다. div의 중심에 절대적으로 배치하여 시작하고 개별적으로 이동시킵니다. 나는이 아이디어를 일부 js와 교활한 수학으로 확장하는 것이 아주 간단하다고 생각합니다.

Answer 2

SVG에서이 모양을 쉽게 만들 수 있습니다. 별을 만들려면 polygon을 사용하고 별을 둘러싼 텍스트를 만들려면 text과 textPath을 사용하십시오.

SVG 예제는 this website을 참조하십시오.

• a star using polygon,
• text on a path : 특히 당신은 좀보고 싶을 것이다.

SVG specification의 관련 섹션을 살펴 보는 것도 좋습니다.