Щоб обернути координату Y в SVG, найпростіше використовувати трансформацію
scale() з від'ємним значенням для осі Y, наприклад, transform="scale(1, -1)", що відображає елемент по горизонтальній осі, або transform="translate(0, 100) scale(1, -1) translate(0, -100)", якщо потрібне обертання навколо конкретної точки; або ж застосувати matrix() з відповідними значеннями для інвертування Y-осі, щоб перетворити координати з верхньоголівого в нижній лівий початок і навпаки, залежно від ваших цілей відображення в SVG.
Основні способи інвертування Y-координати:
За допомогою scale(1, -1):
Це найпростіший спосіб, який відображає елемент відносно його власної осі X, інвертуючи його вгору-вниз.
transform="scale(1, -1)" MDN Web Docs
Приклад:
Примітка: Це може змінити положення елемента, оскільки він "відбивається" від верхньої межі.
За допомогою matrix():
matrix(a, b, c, d, e, f) дозволяє складніші перетворення. Для інвертування Y-координати (відбиття від горизонтальної лінії) використовуйте: matrix(1, 0, 0, -1, 0, 0).
transform="matrix(1, 0, 0, -1, 0, 0)"
Приклад:
Примітка: Це інвертує координати Y відносно початку координат (0,0) SVG.
Поєднання translate() та scale() (для обертання навколо точки):
Щоб обернути елемент навколо його центру (або іншої точки), спочатку перемістіть його, потім віддзеркальте, потім поверніть назад.
transform="translate(0, 100) scale(1, -1) translate(0, -100)"
Це переміщує елемент до точки (0, 100), віддзеркалює його відносно цієї точки, а потім повертає назад.
Це більш гнучкий метод для обертання навколо фіксованої осі.
Вибір методу залежить від того, яку саме "обертання" Y-координати ви хочете досягти: від дзеркального відображення, інверсії відносно початку координат чи обертання навколо певної осі.