Изменить масштаб элемента SVG

Question

У меня есть различные rect элементы, которые нарисованы внутри слоя svg, который перекрывается с png изображением.

В другом виде я вижу нарисованные элементы, но изображение ниже большеи он не имеет одинакового масштабного коэффициента, если я разделю ширину на высоту для обоих изображений, результаты не будут одинаковыми.

Как я могу изменить масштаб элемента SVG внутри изображения с двумя различнымимасштабные коэффициенты?

Эти изображения могут объяснить, что я имею в виду

Изображение с нарисованным прямоугольником:

Изображение, которое я должен повторношкала:

Answer 1

Я решил проблему с помощью простой функции.Наши неизвестные - это координаты прямоугольника, которые мы хотим изменить, и его размер, поэтому, если мы обозначим oldRectX и oldRectY , newRectX и newRectY в перспективе как координаты старого и нового прямоугольника и с oldSVGWidth и oldSVGHeight , newSVGWidth и newSVGHeight , соответственно, как старый иновые размеры SVG, которые содержат rects, применяя это соотношение, мы можем вычислить новое положение и новый размер:

oldRectX : oldSVGWidth = newRectX : newSVGWidth 

Таким образом, я могу вычислить newRectX:

newRectX = (oldRectX * newSVGWidth)/oldSVGWith

По той же причинеэто применимо для вычисления newRectY с той разницей, что я должен заменить ширину на высоту, а X на Y:

newRectY = (oldRectY * newSVGHeight)/oldSVGHeight

Наконец, новые размеры:

newRectWidth = oldRectWidth * (newSVGWidth/oldSVGWidth)
newRectHeight = oldRectWidth * (newSVGHeight/oldSVGHeight)