Текст вокруг круга с 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

Хорошо, правда, я забыл, где были точки на изображении, так как это было последнее, что я добавил (ооо), но это - это то, что я выбил, используя чистый CSS, в основном идея заключается в том, что у вас есть весь текст, абсолютно расположенный в центре div, чтобы начать, а затем индивидуально переместить их оттуда. Я думаю, было бы довольно просто расширить эту идею с помощью js и хитрой математики.