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>
自己動手試一試 »