1

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

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
M.Morris
  • 147
  • 1
  • 12
  • check https://stackoverflow.com/questions/6249664/does-svg-support-embedding-of-bitmap-images. maybe embedding image file will help to deal with this kind of stuff. – Alireza Oct 04 '18 at 16:30
  • Out of curiosity, are the rects being used only as event catchers? – Ted Oct 04 '18 at 19:15

1 Answers1

1

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)
M.Morris
  • 147
  • 1
  • 12