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

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

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

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

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

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

1
M.Morris 4 Окт 2018 в 18:42

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)
1
M.Morris 6 Окт 2018 в 14:17