在SVG中对齐文本

Question

如何在SVG中自动对齐文本，而不必手动设置呢？目前，我已经手动设置了矩形内部的文本定位。这很好，但是当文本值改变时，它看起来不准确，不能很好地工作。是否有一种自动将文本居中对齐的方法，类似于text-align:center，使其根据页面响应？

    <svg width="170" height="80" >
        <rect width="150" height="70" stroke="#4f7f64" stroke-width="5" fill="white" />
        <text x="45" y="25" r="65" font-family="'futura-pt-n7', 'futura-pt' , Helvetica, Arial, sans-serif" font-size="18" fill="black" font-weight="bold"> Settled </text>
        <text x="30%" y="55" r="65" font-family="'futura-pt-n7', 'futura-pt' , Helvetica, Arial, sans-serif" font-size="18" fill="black" font-weight="bold"> @String.Format("{0:C0}", Model.ReportTotalData.Select(r => r.Settled).FirstOrDefault()) </text>
    </svg>

- Andrew Kilburn

---

可能是如何在SVG矩形中放置和居中文本的重复问题。 - rr-

Answer 1

最后，我只是使用了一个简单的CSS圆形，更加容易。

- Andrew Kilburn

Answer 2

您可以通过使用text-anchor属性来实现类似于text-align:center的效果，方法如下：

1. 将文本定位于要居中文本的元素的中心位置（您可以使用x="50%"）。
2. 将text-anchor="middle"添加到文本中，以便在指定位置的几何中心呈现。

以下是基于您的代码的工作示例：

<svg width="170" height="80" >
  <rect width="150" height="70" stroke="#4f7f64" stroke-width="5" fill="white" />
  <text id="myText" x="75" y="25" r="65" font-family="'futura-pt-n7', 'futura-pt' , Helvetica, Arial, sans-serif" font-size="18" fill="black" font-weight="bold" text-anchor="middle"> Settled </text>
  <text x="50%" y="55" r="65" font-family="'futura-pt-n7', 'futura-pt' , Helvetica, Arial, sans-serif" font-size="18" fill="black" font-weight="bold"  text-anchor="middle"> @String.Format("{0:C0}", Model.ReportTotalData.Select(r => r.Settled).FirstOrDefault()) </text>
</svg>

<div style="margin-top:20px;">
  <input type="text" id="inputText" value="Test" />
  <input type="button" value="Update Text" onclick="updateText()" />
</div>

<script>
  function updateText() {
    document.getElementById("myText").innerHTML = document.getElementById("inputText").value;
  }
</script>

正如您所看到的，您可以动态替换文本，并且它将保持在矩形内居中。

- Alvaro Montoro