html - 使用 css 更改 svg 文本定位

Question

出于某种原因，我无法使用 CSS 更改 Svg 文本标签 x 和 y 变量，即使它应该可以工作并且正在使用 Svg 和 . 如果我直接在 html 上添加 x 和 y 位置，它就可以工作。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;
}

标签： htmlcsssvg

Answer 1

我已经使用这两种类型的解决方案来解决这个问题，但第一种解决方案对我来说是最好的，使用左上角

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>

还有另一种方法是使用转换翻译，例如：

t2{变换：翻译（100px，100px）}