Javascriptでサークルの周りのテキスト

Question

私は同じ質問についてはStackoverflowの周りを検索しましたが、私の質問のように見えるすべての質問はXcode（iPhone）でプログラミングされています。私はJavascriptを使用していますが、これをどのように解決するかはわかりません。

スターを作成しました（RaphaelJSに基づいています）。その星には可変のスターポイントがあるので、8ポイントのスターになることもできますが、9または10または11にもなります。私の質問は、そのスターの周りの円の中にテキストを入れることです。スターが8ポイントを持っている場合、それはすべてのポイントを持っています（それは8ワードです）。

私は私の問題はので、多分私の質問を明確にすることを、Illustratorで示している。将来的には（私は画像でそれをやっているこの瞬間に

、それは柔軟ではありませんIデータベースを使って星と言葉を生成する）。私はたくさんの検索をしました。私はこれが可能な技術がSVGであることを発見しました。しかし、多くの時間の試行錯誤の後、私は私のイメージと似た何かを持っていません。

Answer 1

これは私が追加した最後のものだったので、どこに点があったのか忘れていましたが、thisは私が純粋なCSSを使ってノックしたものです。基本的にアイデアはすべてのテキストdivの中心に絶対に配置して開始し、個別にそこから移動します。私はいくつかのjsと狡猾な数学でこの考え方を拡張するのは非常に簡単だと思います。

Answer 2

SVGでこの図形を簡単に作成できます。スターを作成するにはpolygonを使用し、スターを囲むテキストを作成するにはtextとtextPathを使用してください。

SVGの例については、this websiteを参照してください。

• a star using polygon、
• text on a path：特にあなたが見てしたいと思います。

SVG specificationの関連セクションもご覧ください。