SVG <text> 和 <tspan>
SVG 文字 - <text>
<text> 元素用於定義文字。
<text> 元素有七個基本屬性用於定位和旋轉文字
| Attribute | 描述 |
|---|---|
| x | 文字起始的 x 座標。預設為 0 |
| y | 文字起始的 y 座標。預設為 0 |
| dx | 文字的水平偏移位置（相對於前一個文字位置） |
| dy | 文字的垂直偏移位置（相對於前一個文字位置） |
| rotate | 應用於文字每個字母的旋轉（以度為單位） |
| textLength | 文字必須適應的寬度 |
| lengthAdjust | 文字如何被壓縮或拉伸以適應 textLength 屬性定義的寬度 |
一個簡單的文字
使用 SVG 編寫一個簡單的文字
這是 SVG 程式碼
示例
<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="15" fill="red">我愛 SVG!</text>
</svg>
自己動手試一試 »
無填充的文字
僅有描邊而無填充的文字
這是 SVG 程式碼
示例
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="none" stroke="red" font-size="35">我愛 SVG!</text>
</svg>
自己動手試一試 »
帶填充和描邊的文字
帶填充和描邊的文字
這是 SVG 程式碼
示例
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="pink" stroke="blue" font-size="35">我愛 SVG!</text>
</svg>
自己動手試一試 »
旋轉文字中的每個字母
使用 rotate 屬性，以指定的度數旋轉文字中的每個字母
這是 SVG 程式碼
示例
<svg height="40" width="200">
<text x="5" y="30" fill="red" font-size="35" rotate="30">我愛 SVG!</text>
</svg>
自己動手試一試 »
旋轉整個文字
使用 transform 屬性旋轉整個文字
這是 SVG 程式碼
示例
<svg height="100" width="200">
<text x="5" y="30" fill="red" font-size="25" transform="rotate(30 20,40)">我愛 SVG!</text>
</svg>
自己動手試一試 »
SVG 文字 - <tspan>
<tspan> 元素用於標記文字的部分（就像 HTML 中的 <span> 元素一樣）。
<tspan> 元素必須是 <text> 元素或另一個 <tspan> 元素的子元素。
<tspan> 元素有六個基本屬性用於定位和旋轉文字
| Attribute | 描述 |
|---|---|
| x | 設定 tspan 中文字的絕對起始 x 座標 |
| y | 設定 tspan 中文字的絕對起始 y 座標 |
| dx | tspan 中文字的水平偏移位置（相對於前一個文字位置） |
| dy | tspan 中文字的垂直偏移位置（相對於前一個文字位置） |
| rotate | 應用於 tspan 中文字每個字母的旋轉（以度為單位） |
| textLength | tspan 中文字必須適應的寬度 |
<tspan> 元素的使用
在 <text> 元素中使用 <tspan> 元素
這是 SVG 程式碼
示例
<svg height="40" width="250" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="red" font-size="35">我愛
<tspan fill="none" stroke="green">SVG</tspan>!
</text>
</svg>
自己動手試一試 »
