I have used these 2 types of solutions for this problem but the first solution is the best for me using top left right

svg g #t2{
  /*you can use top left right like the example below*/
  top:100px;
  left:200px;
  

  
}

<svg id="main">
       <g id="g2">
          <circle id="c2" class="resize"/>
          <rect id="r2" class="resize"/>
          <text id="t2" class="resize">texthing</text>
       </g>

there is also another way of doing this is using transform translate like:

t2{ transform:translate(100px, 100px) }

For some reason i can’t change the Svg text tags x and y variables with CSS
even though it should be working and is working with Svg and .
it works if i add the x and y postions directly on the html.
Html:

<svg id="main">
   <g id="g2">
      <circle id="c2" class="resize"/>
      <rect id="r2" class="resize"/>
      <text id="t2" class="resize">texthing</text>
   </g>

css

#t2{
  x:250px;
  y:150px;
}