SVG 中心文本

Question

我有以下内容：

<html>
  <svg height="500" width="500">
    <g id="avg-items">
    <rect
       ry="12.284702"
       rx="14.016526"
       y="186.2337"
       x="355.86771"
       height="96.626312"
       width="140.22598"
       id="basket-label"
       style="display:inline;opacity:0.76999996;fill:#ff0000;stroke:none" >
    </rect>     
    <text
      id="avg-item-num"
      text-anchor="middle">8</text>
  </g>
 </svg>
</html>

根据 this，我的文本应该在矩形中居中。但事实并非如此。任何提示表示赞赏！谢谢！

根据评论，我尝试了以下方法：

<html>
<svg height="500" width="500">
    <g id="avg-items">
    <rect
       height="96.626312"
       width="140.22598"
       id="basket-label"
       style="display:inline;opacity:0.76999996;fill:#ff0000;stroke:none">
    </rect>     
    <text
      id="avg-item-num"
      text-anchor="middle">8</text>
  </g>
 </svg>
</html>

但是还是没有居中

Answer 1

如果您不打算为文本提供 x/y 值，则必须以原点为中心绘制矩形。我粗略地将 width/height 除以 2，并将它们设为负值以显示下面的内容。

  <svg height="500" width="500" viewBox="-70 -48 500 500">
    <g id="avg-items">
    <rect
       ry="12.284702"
       rx="14.016526"
       x = "-70"
       y = "-48"
       height="96.626312"
       width="140.22598"
       id="basket-label"
       style="display:inline;opacity:0.76999996;fill:#ff0000;stroke:none" >
    </rect>     
    <text
      id="avg-item-num"
      text-anchor="middle">8</text>
  </g>

SVG 中心文本

SVG center text

html

svg

text

center