How to set an element with relative positioning in

Question

Recently began to use SVG in my personal projects. I've learned that SVG is not (just) an image but also a document. I'm willing to know how to set an element with relative positioning in absolute dimensions in SVG?

For a better understanding in case I didn't make the question clear enough, I've drawn a diagram to make it easier to get the picture:

As in this image, I have a square in 100x100 px dimension. When the user changes his/her reading device, I hope the pink square can keep the size and the positioning.

I've read about the article 'How to Scale SVG' by AMELIA BELLAMY-ROYDS on CSS Tricks, got the idea but didn't really find out the way doing it.

I've found <rect> tag in SVG file, but have no idea how to make the pink square can be maintained how big it is when the scale of parent container changes.

Any suggestion, or article, will be appreciated in advance.

Answer 1

The easiest solution would be not resizing the SVG. You give your SVG a width and a height in pixels (or whatever) and you make your SVG not responsive.

If this doesn't work for you, if you need to resize the whole svg element but not the pink rectangle, next comes an example where I resize the SVG canvas but the <rect> is apparently not resized.

function init(){
  let p = {
  x : 1000 * .05,// 5% of the svg width
  y : 500 * .05  // 5% of the svg height
  }
  
  p = getCoords(p);
  
  let size = {
    x:100,
    y:100
  }
  size = getCoords(size);

  // resize the rect 
  theRect.setAttributeNS(null,"x",p.x);
  theRect.setAttributeNS(null,"y",p.y);
  theRect.setAttributeNS(null,"width",size.x);
  theRect.setAttributeNS(null,"height",size.y);
}


function getCoords(o){
var p = svg.createSVGPoint();
p.x= o.x;
p.y= o.y;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
}

setTimeout(function() {
		init();
		addEventListener('resize', init, false);
}, 15);

svg{border:1px solid}

<svg id="svg" viewBox="0 0 1000 500">
  
  <circle fill="gold" cx="500" cy="250" r="200" />
  <rect id="theRect" fill="hotpink" x="5%" y="5%" width="100px" height="100px" />
  
</svg>