Как повернуть свг элемент?

Question

[Mark321]

пытаюсь повернуть свг стрелку
пишу transform="rotate(-180)" и стрелка просто исчезает (не в css стилях, а в самом свг файле картинки)
как это исправить, в девтулсах если навести на стрелку, она есть, но её просто не видно

Answer 1

[RAX7]

В svg все трансформации происходят относительно начала координат, т.е. вращение происходит вокруг левого верхнего угла. Для того чтобы повернуть элемент относительно другой точки нужно сделать так:

transform="translate(cx cy) rotate(-180) translate(-cx -cy)"

где cx, cy координаты точки центра вращения.
https://developer.mozilla.org/en-US/docs/Web/API/C...