用JavaScript在圆周围显示文字

Question

我在Stackoverflow周围搜索了相同的问题，但是所有看起来有点像我的问题的问题都在Xcode（iPhone）中进行了编程。 我正在使用Javascript，但无法弄清楚如何解决这个问题。

我创建了一颗星（基于RaphaelJS）。 那颗星有可变的星点，所以它可能是一个有8点的星，但也有9或10或11。我的问题是，我想在该星周围画一个圆圈。 如果星星有8点，那么每个点都有自己的单词（所以有8个单词）。

我在Illustrator中说明了我的问题，所以也许我的问题得以澄清：

目前，我正在处理图像，但这并不灵活（将来，我将使用数据库来生成星星和文字）。 我搜了很多。 我发现任何可能的技术都是SVG。 但是经过数小时的反复试验，我没有与自己的形象相似的东西。

Answer 1

您可以在SVG中轻松创建此形状。 使用polygon来创建明星和text和textPath创建围绕恒星的文本。

有关SVG示例，请参见此网站 。 特别是，您需要查看以下内容：

• 使用多边形的星星
• 路径上的文字 。

我还建议您查看SVG规范的相关部分。

Answer 2

好吧我承认忘了其中分获图像中，因为这是我说的最后一件事（D'哦），但是这是我撞倒了使用纯CSS，基本的想法是，你把所有的文字绝对定位的div的中心开始，然后分别将其从那里移出。 我认为用一些js和狡猾的数学来扩展这个想法将非常简单。