Проблема с вращение SVG

Здравствуйте,
пытаюсь сделать svg-панель с элементом, который крутится вокруг своей оси.
Читал тему, где написано как это делать. Делаю также, но вместо того, чтобы крутиться вокруг своей оси, элемент крутится вокруг какого-то другого центра.

Для проверки создал новый файл в inkscape, нарисовал квадрат, прописал анимацию - тоже самое.
Так как в главном css webui также прописаны классы анимации, то я попробовал в демо-дашборде запустить у элемента анимацию “ui-select-spin” - тоже крутит не вокруг себя.

Я что-то делаю не так или это баг?

Можно ссылку на тему с вращением.
Тоже иногда нужно такое поведение.
Пока как костыль сделано попеременное отображение двух картинок

Вот эта Анимация в svg панели

Добрый день.
В дополнение к инструкции, предоставленной по вашей ссылке, необходимо определить центр вращения фигуры, для этого в style записываем вычисленное значение фигуры в свойство transform-origin.
Приведу пример.
Я взял просто прямоугольник и заставил его вращаться, далее значения будут вымышленные, подставьте свои.

Прямоугольник имеет размеры 68.04467 на 51.782421 и расположен на координатах x=84.182587, y=73.501541. Чтобы определить центр прямоугольника, нужно добавить половину его ширины и высоты к его координатам X и Y соответственно.

Вычислим координаты центра прямоугольника:

  1. Центр по оси X: 84.182587 + 68.04467 / 2
  2. Центр по оси Y: 73.501541 + 51.782421 / 2

Центр прямоугольника находится на координатах (118.204922, 99.3927515). Таким образом, вам нужно добавить следующее свойство в стиль вашего прямоугольника:

transform-origin: 118.204922px 99.3927515px;

Тяжеловато, конечно, но работает :+1:

Не каждый раз нужно что-то крутить, но когда надо, то можно замучитья вычислять центры, особенно, если макет потом меняется. Если бы была переменная-хелпер с центром (как val для значения) - было бы проще)

Отлично.
Запишу в книгу предложений ваш запрос :+1:

Мне тут фронтендеры ещё подсказали, как это сделать без вычислений

Прямо в поле style можно записать и работает
'transform-box: fill-box; transform-origin: 50% 50%; animation: rotate 1s infinite linear;'

Правда тогда уже textarea тут нужен, чтобы длинные конструкции записывать удобней)

3 Likes