У меня есть разные элементы rect, которые нарисованы внутри слоя svg, который перекрывает изображение png.
В другом представлении я вижу нарисованные элементы, но изображение ниже больше и имеет другой коэффициент масштабирования. Если я разделю ширину на высоту для обоих изображений, результаты не будут одинаковыми.
Как я могу изменить масштаб элемента svg внутри изображения с двумя разными масштабными коэффициентами?
Эти изображения могут объяснить, что я собираюсь делать
Изображение с нарисованным прямоугольником: 
Изображение, которое я должен масштабировать: 
1 ответ
Решил проблему простой функцией. Наши неизвестные - это координаты прямоугольника, которые мы хотим изменить, и его размер, поэтому, если мы обозначим с помощью oldRectX и oldRectY , newRectX и < em> newRectY соответственно как старые и новые координаты прямоугольника и с oldSVGWidth и oldSVGHeight , newSVGWidth и newSVGHeight < / em> соответственно, как старые и новые размеры SVG, которые содержат прямоугольники, применяя это соотношение, мы можем вычислить новое положение и новый размер:
oldRectX : oldSVGWidth = newRectX : newSVGWidth
Итак, я могу вычислить newRectX:
newRectX = (oldRectX * newSVGWidth)/oldSVGWith
Те же рассуждения, что и для вычисления newRectY, с той разницей, что мне нужно заменить ширину на высоту и X на Y:
newRectY = (oldRectY * newSVGHeight)/oldSVGHeight
Наконец-то новые размеры:
newRectWidth = oldRectWidth * (newSVGWidth/oldSVGWidth)
newRectHeight = oldRectWidth * (newSVGHeight/oldSVGHeight)
En Español