我正在嘗試讓 SVG 內的文本路徑跟隨半圈，但我無法讓它從正確的點開始。
它像這樣在我的專案中實作
<svg viewBox="0 0 500 500">
<path fill="transparent" id="curve" d=" M 400 0 A 200 197 0 1 1 400 -7" />
<text x="6" width="500">
<a href='https://google.com'><textPath href="#curve">
Test text direction
</textPath></a>
</text>
</svg>請檢查此影像
文本 -測驗文本方向位于該命令path指向的公式中從頭開始的曲線上。M(move)要更改文本位置的起點，您需要交換曲線的beginning和end。
它是：
d=" M 400 0 A 200 197 0 1 1 400 -7"
它變成了：
d=" M 0 0 A 200 200 0 0 0 400 0"
<tspan dy="-5"調整文本與曲線的距離
<svg viewBox="0 0 500 500">
<path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
<a href='https://google.com'>
<text x="6" >
<textPath xlink:href="#curve">
<tspan dy="-5">Test text direction </tspan>
</textPath>
</text>
</a>
</svg>從曲線的開頭調整文本位置 -startOffset="40%"
顯示代碼片段
<svg viewBox="0 0 500 500">
<path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
<a href='https://google.com'>
<text x="6" >
<textPath xlink:href="#curve" startOffset="40%">
<tspan dy="-5">Test text direction </tspan>
</textPath>
</text>
</a>
</svg>更新
有沒有比猜測 40% 更好的方法將文本居中到曲線的中心？
添加startOffset="50%" text-anchor="middle"
顯示代碼片段
<svg viewBox="0 0 500 500">
<path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
<a href='https://google.com'>
<text x="6" >
<textPath xlink:href="#curve" startOffset="50%" text-anchor="middle" >
<tspan dy="-5">Test text direction </tspan>
</textPath>
</text>
</a>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441118.html
上一篇：如何計算多邊形的精確旋轉？
下一篇：路徑內的SVG蒙版視頻