Логика работы последовательности трансформаций в transform

До конца не понимаю как работают трансформации в SVG.

Почему scale сделали не вокруг центра фигуры, а от начала координат, ведь теперь фигура не просто увеличилась но и сдвинулась... Тогда вопрос как её увеличить вокруг центра?

В данном случае я фигуру первым действием translate(-20,-20) возвращаю в начало координат, как я думаю, и при масштабирование фигура должна остаться у координат 0,0, но она всё-равно сдвинута остаётся, почему?

В чём разница этих двух вариантов? Правильно ли я понимаю что преобразования выполняются с конца?
Как правильно повернуть фигуру на 45 градусов и увеличить в два раза относительно её центра?

Ответ

Я немного изменил исходный код автора, чтобы не учитывать смещение относительно начала координат, которое задает viewBox="-100 -100 400 400", чтобы в чистом виде посмотреть, как влияет команда scale(2) на позиционирование фигур.

Если левый верхний угол прямоугольника не совпадает с началом координат, в вашем случае 20px. то при применении команды scale(2) все параметры прямоугольника умножаются на X2 и координаты левого верхнего угла становятся - 40,40px ширина, будет равна width="80",высота height="80" на рисунке это зеленый квадрат.

Чтобы вернуть увеличенный, зелёный квадрат в исходную позицию 20x20px нужно применить команду translate(-20 -20) Если команд трансформации несколько, то они выполняются от последней к первой transform="translate(-20 -20) scale(2 2) "

Пример масштабирования вокруг точки
Допустим у нас есть точка с координатами 50,50px вокруг которой мы будем масштабировать прямоугольник, таким образом, чтобы он увеличивался, без смешения от этого центра. Механизм центрирования тот же. Считается насколько увеличилось расстояние от начала координат до центра фигуры и вычитается размер, чтобы вернуть фигуру на прежнюю позицию.