Здравствуйте,
пытаюсь сделать svg-панель с элементом, который крутится вокруг своей оси.
Читал тему, где написано как это делать. Делаю также, но вместо того, чтобы крутиться вокруг своей оси, элемент крутится вокруг какого-то другого центра.
Для проверки создал новый файл в inkscape, нарисовал квадрат, прописал анимацию - тоже самое.
Так как в главном css webui также прописаны классы анимации, то я попробовал в демо-дашборде запустить у элемента анимацию “ui-select-spin” - тоже крутит не вокруг себя.
Я что-то делаю не так или это баг?
Можно ссылку на тему с вращением.
Тоже иногда нужно такое поведение.
Пока как костыль сделано попеременное отображение двух картинок
Добрый день.
В дополнение к инструкции, предоставленной по вашей ссылке, необходимо определить центр вращения фигуры, для этого в style записываем вычисленное значение фигуры в свойство transform-origin.
Приведу пример.
Я взял просто прямоугольник и заставил его вращаться, далее значения будут вымышленные, подставьте свои.
Прямоугольник имеет размеры 68.04467 на 51.782421 и расположен на координатах x=84.182587, y=73.501541. Чтобы определить центр прямоугольника, нужно добавить половину его ширины и высоты к его координатам X и Y соответственно.
Вычислим координаты центра прямоугольника:
- Центр по оси X: 84.182587 + 68.04467 / 2
- Центр по оси Y: 73.501541 + 51.782421 / 2
Центр прямоугольника находится на координатах (118.204922, 99.3927515). Таким образом, вам нужно добавить следующее свойство в стиль вашего прямоугольника:
transform-origin: 118.204922px 99.3927515px;
Тяжеловато, конечно, но работает 
Не каждый раз нужно что-то крутить, но когда надо, то можно замучитья вычислять центры, особенно, если макет потом меняется. Если бы была переменная-хелпер с центром (как val для значения) - было бы проще)
Отлично.
Запишу в книгу предложений ваш запрос
Мне тут фронтендеры ещё подсказали, как это сделать без вычислений
Прямо в поле style можно записать и работает
'transform-box: fill-box; transform-origin: 50% 50%; animation: rotate 1s infinite linear;'
Правда тогда уже textarea тут нужен, чтобы длинные конструкции записывать удобней)
4 лайка