CODEWITHSUNDEEP
javascriptreactjssvgdraw
M.Morris
M.Morris

Reputation: 147

Re-scale svg element

I have different rect elements that are drawn inside an svg layer which is overlapped over a png image.

In another view I can see the elements drawn but the image below is bigger and it hasn't same scale factor, if I divide the width for height for both the images, the results aren't the same.

How can I re-scale an svg element inside an image with two different scale factors?

These images could explain what I mean to do

Image with rect drawn: image with rect drawn

Image that I should re-scale: image that I should re-scale

Upvotes: 1

Views: 160

Answers (1)

M.Morris
M.Morris

Reputation: 147

I have solved the problem with a simple function. Ours unknowns are the rect's coordinates that we want to re-scale and its size, so if we denote with oldRectX and oldRectY, newRectX and newRectY rispectively as the old and the new rect's coordinates and with oldSVGWidth and oldSVGHeight, newSVGWidth and newSVGHeight rispectively as the old and the new SVG's dimensions that contains the rects, applying this ratio we can calculate the new positionament and the new size:

oldRectX : oldSVGWidth = newRectX : newSVGWidth

So I can calculate newRectX:

newRectX = (oldRectX * newSVGWidth)/oldSVGWith

The same reasoning it's apply for calculate newRectY with the difference that I have to replace the width with the height and X with Y:

newRectY = (oldRectY * newSVGHeight)/oldSVGHeight

Finally the new sizes:

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

Upvotes: 1

Related Questions