Question

如何在SVG中对齐文本而无需手动执行。目前我手动设置了矩形内文本的位置。这很好，直到文本的值发生变化，然后它看起来并没有真正起作用。有没有办法自动设置要在中心对齐的文本，类似于text-align:center，所以它会根据页面变得敏感？

＆＃13;

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

＆＃13;

Answer 1

最后，我只是去了一个简单的CSS圈子，更容易。

Answer 2

使用text-anchor属性可以达到与text-align:center类似的效果：

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

这是根据您的代码在这里工作的：

＆＃13;

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

＆＃13;

如您所见，您可以动态替换文本，它将保持在矩形中心。

在SVG中对齐文本

2 个答案: