Как установить элемент с относительным позиционированием в абсолютных измерениях в SVG?

Question

Недавно начал использовать SVG в моих личных проектах. Я узнал, что SVG - это не просто изображение, а документ. Я хочу знать, как установить элемент с относительным позиционированием в абсолютных измерениях в SVG?

Для лучшего понимания на тот случай, если я недостаточно прояснил вопрос, я нарисовал диаграмму, чтобы упростить получение картины:

Как и на этом рисунке, у меня есть квадрат размером 100x100 пикселей. Я надеюсь, что когда пользователь поменяет свое считывающее устройство, розовый квадрат сохранит размер и расположение.

Я читал о статье * Как масштабировать SVG 'AMELIA BELLAMY-ROYDS на CSS Tricks, получил идею, но на самом деле не нашел способ сделать это.

Я обнаружил тег <rect> в SVG-файле, но не знаю, как сделать так, чтобы розовый квадрат можно было сохранить, насколько он велик при изменении масштаба родительского контейнера.

Любое предложение или статья будет оценена заранее.

Answer 1

Самое простое решение - не изменять размер SVG. Вы задаете SVG ширину и высоту в пикселях (или что-то еще), и вы делаете SVG не адаптивным.

Если это не работает для вас, если вам нужно изменить размер всего элемента svg, но не розового прямоугольника, далее следует пример, где я изменяю размер холста SVG, но <rect> - это , по-видимому не изменен

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>