SVG <textPath>
SVG 文字 - <textPath>
<textPath> 元素用於沿著路徑的形狀渲染文字。
<textPath> 元素有六個基本屬性
| Attribute | 描述 |
|---|---|
| href | 渲染文字的路徑的 URL |
| lengthAdjust | 如何壓縮或拉伸文字以適應 textLength 屬性定義的寬度。可以是 spacing|spacingAndGlyphs。預設值為 spacing |
| method | 如何沿著路徑渲染字形。可以是 align|stretch。預設值為 align |
| spacing | 字形之間的間距。可以是 auto|exact。預設值為 exact |
| startOffset | 文字開頭應該距離路徑開頭多遠。可以是長度、百分比或數字 |
| textLength | 文字沿路徑的寬度。可以是長度、百分比或數字。預設值為 auto |
沿路徑的文字
在 <text> 元素內部使用 <textPath> 元素
這是 SVG 程式碼
示例
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" startOffset="80">我愛 SVG！我愛 SVG！</textPath>
</text>
</svg>
自己動手試一試 »
沿路徑的文字 2
這裡我們使用 textLength 屬性將文字寬度定義為路徑的 100%
這是 SVG 程式碼
示例
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" textLength="100%" startOffset="20">我愛 SVG！我愛 SVG！</textPath>
</text>
</svg>
自己動手試一試 »
