在SVG中对齐文本

如何在SVG中对齐文本，而无需手动执行。此刻，我已经手动设置矩形内文本的位置。这很好，直到文本的值改变，然后它看起来关闭，并没有真正的工作。有没有一种方法可以自动设置文本在中心对齐，类似于text-align:center，因此它会根据页面变得响应？在SVG中对齐文本

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

来源

2015-07-20 Andrew Kilburn

可能的重复[如何放置和中心文本在SVG矩形]（http://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle ） –

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

来源

2015-07-20 14:01:48

您可以通过使用text-anchor财产这样实现对text-align:center类似的效果：

位置，要在其中有居中的文本元素的中央的文字（可以使用x="50%"）。
将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>

正如你所看到的，你可以动态替换的文字，它会保持在矩形内居中。

来源

2015-07-20 15:42:09

在SVG中对齐文本

回答

相关问题