Need help with percentage values to position an element in svg.js

[patapron]

Hello everyone,

I have used all this method to set position to an element in my app, using realative value (%) but it doesn't seem to work.

//declaration
  fetch("sensor.svg")
  .then(resp => resp.text())
  .then(svgtxt => {
      let t1 = parser.parseFromString(svgtxt, "image/svg+xml").getElementsByTagName("svg")[0].childNodes[0];
      t1.setAttribute("id", "idSensor1");
      draw.svg(new XMLSerializer().serializeToString(t1));

//from here

      draw.findOne("g#idSensor1").transform({
        relative: {x: '50%', y: '50%'}
      }) 

      draw.findOne("g#idSensor1").transform({
        translate: {x: '50%', y: '50%'}
      })

      draw.findOne("g#idSensor1").transform({
        translateX: '50%',
        translateY: '50%'
      })

      draw.findOne("g#idSensor1").center('50%','50%');
      draw.findOne("g#idSensor1").cx('50%').cy('50%');
      draw.findOne("g#idSensor1").x('50%').y('50%');
      draw.findOne("g#idSensor1").move('50%','50%');
      draw.findOne("g#idSensor1").dmove('50%','50%');
      draw.findOne("g#idSensor1").attr({ x: '50%', y: '50%' });
      draw.findOne("g#idSensor1").attr({ cx: '50%', cy: '50%' });

I need user percentage values, but I can't position it

[Fuzzyma]

You cannot position a group!! It neither has x nor y attribues. If you want to move it around, you translate it with translate(). However transformations dont take percentage values. So you get the bbox() of the group first, and move it by the half of it