有沒有辦法讓文本沿著 svg 中的曲線居中？
<svg width="100" height="25" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="intermediate" d="M 7 5 C 25 25, 75 25, 93 5"/>
</defs>
<text fill="#105ca6">
<textPath style="alignment-baseline: baseline;" xlink:href="#intermediate">Intermediate</textPath>
</text>
</svg>uj5u.com熱心網友回復：
首先你需要使用startOffset="50%". startOffset 屬性為初始當前文本位置定義了距離路徑起點的偏移量。這將使文本從路徑的中間開始。
接下來，您需要使用text-anchor="middle"將文本圍繞起點對齊，在這種情況下，起點是路徑的中間。
<svg width="100" height="25" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="intermediate" d="M 7 5 C 25 25, 75 25, 93 5" />
</defs>
<text fill="#105ca6">
<textPath startOffset="50%" dominant-baseline="middle" text-anchor="middle" xlink:href="#intermediate">Intermediate</textPath>
</text>
</svg>uj5u.com熱心網友回復：
<div style="max-width:90px; margin:0 auto">
<svg xmlns="http://www.w3.org/2000/svg" id="svg">
<defs>
<path id="intermediate" d="M 7 5 C 25 25, 75 25, 100 5"/>
</defs>
<text fill="#105ca6">
<textPath style="alignment-baseline: baseline;" xlink:href="#intermediate">Intermediate</textPath></text>
</svg>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/434746.html