Как сделать вращение текста вокруг svg?

Question

[ssawyer]

Не получается выставить выбранное слово ровно по середине. Примерное поведение нужно то что на скрине.
Помогите люди добрые кто шарит в геометрии.


rotateTextToPosition("Сериалы")

Comments

[Ankhena]

Так, думаю, будет понятнее, что там с центром

[ssawyer]

Ankhena, Это чет на codepen криво встает, если убрать js то все ровно, но при трансформации такое. Даже если я высчитываю угол 45 градусов на 90 градусов круга - слово встает не по середине, только сама фигура в инспекторе

[Ankhena]

ssawyer,

может, ещё упростим, чтобы совсем понятно стало

Попасть-то вы попали буквами куда надо. Но это же не центр.

Может вам поможет https://codepen.io/michellebarker/pen/oNXyJxv
https://css-irl.info/positioning-text-along-a-path...

[sergski]

А не проще c помощью css анимации?

[ssawyer]

Мне нужно вращать это со слайдом. Слайд сериалы = прокрутка круга до сериалов

[ssawyer]

Ankhena, Вот сейчас вроде по центру, только не понятно теперь как распределить слова по окружности

[Ankhena]

ssawyer,

Вот сейчас вроде по центру, только не понятно теперь как распределить слова по окружности

Посчитать.
Например, в образце выше всё посчитано.

[catch-a-chalk]

function rotateTextToPosition(targetText) {
const words = document.querySelectorAll(".word");
const group = document.querySelector(".circle-text-path");

const radius = 215;
const circumference = 2 * Math.PI * radius;

let targetWord = null;
let totalOffset = 0; // длина до нужного слова
let wordCenterOffset = 0;

for (let i = 0; i < words.length; i++) {
const word = words[i];
const bbox = word.getBBox();
const dx = parseFloat(word.getAttribute("dx") || 0);
const wordWidth = bbox.width + dx;

if (word.dataset.value === targetText) {
targetWord = word;
wordCenterOffset = totalOffset + wordWidth / 2;
break;
}

totalOffset += wordWidth;
}

if (!targetWord) return;

const wordCenterAngle = (wordCenterOffset / circumference) * 360;

const rotationAngle = 90 - wordCenterAngle;

group.style.transform = `rotate(${rotationAngle}deg)`;
}

Answer 1

[Сергей Т]

Вот так у меня получилось, посмотрите, может поможет)