在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中對齊文本

回答

相關問題