изменить позиционирование SVG текста с css

Question

По какой-то причине я не могу изменить текстовые теги Svg x и y с помощью CSS, хотя он должен работать и работать с Svg и. это работает, если я добавлю позиции x и y прямо на 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;
}

Answer 1

Я использовал эти 2 типа решений для этой проблемы, но первое решение лучше для меня, используя верхний левый и правый

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>

есть и другой способ сделать это, используя transform translate, например:

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