使用SVG，是否可以將文本添加到路徑的中心並水平對齊？

Question

我想將文本添加到路徑的中心並水平對齊，不是沿路徑對齊。

我有以下文本沿中心路徑運行，但我想要顯示它，以便它是水平的，而不管路徑的標題是什麼角度。

<text text-anchor="middle"> 
    <textPath xlink:href="#SomePath" startOffset="50%">Some Text</textPath> 
</text> 

Answer 1

如果我理解正確，你是在每個單獨的字母是直的（即指向北），但遵循路徑。事情是這樣的：

縱觀目前SVG standard這似乎並不可能。

對於水平文本佈局流動，對於給定的 字形的 參考取向是開始於路徑上的 交點到 ，其字形附着和載體，其 點在方向90度 逆時針方向從角度 曲線在交點。

上面的圖像從SVG產生，但是這是通過應用旋轉屬性來實現（你可以從不完善見）通過應用個別字距（旋轉），以每個字母：

<text id="text2897"> 
    <textPath xlink:href="#path2890" id="textPath3304"> 
     <tspan 
     rotate="69.238731 53.737518 40.30315 24.801943 358.96658 358.96658 4.1336575 357.93317 351.73267 351.73267 351.73267 348.63242 343.46533 343.46533 346.56558 347.599 347.599 347.599 347.599 347.599 347.599 346.56558 345.53217 344.49875 343.46533" 
     id="tspan2899"> 
     Some sample text for path 
     </tspan> 
    </textPath> 
    </text> 

Answer 2

你可以很容易地計算腳本中旋轉的必要調整：

var tp = document.getElementById("textpath"); 
var rotate = ""; 
for(var i = 0; i < tp.getNumberOfChars(); i++) 
{ 
    rotate += -tp.getRotationOfChar(i) + " "; 
} 
tp.setAttribute("rotate", rotate);