css - 在 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>

Answer 1

最后，我只是去使用了一个简单的 CSS 圆圈，非常非常容易。