Home » SVG 入門教學

[SVG]SVG 基本圖形 - 文字 text

[ 日期： | 瀏覽：10,121 | 迴響：1 ]

要在 SVG 中畫出文字的話，只要使用 <text> 標籤就可以了。

檢視原始碼 HTML
1
2
3

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<text x="10" y="20" style="fill:green;font-size:24px;font-weight:bold;">男丁格爾's 脫殼玩</text>
</svg>

可以把基本會的 css 設定加到元素中，像是筆者在這邊指定了文字大小及粗體的效果：

svg-shape-text-1

text 還能搭配 textPath 標籤來跟 path 進行關聯，來產生文字輸出時的路徑變化：

檢視原始碼 HTML
1
2
3
4
5
6
7

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<path id="mypath" d="M50 100Q350 50 350 250T450 250" style="fill:none;stroke:red;stroke-width:5;" />
 
	<text x="10" y="20" style="fill:green;font-size:32px;">
		<textPath xlink:href="#mypath">男丁格爾's 脫殼玩 http://abgne.tw</textPath>
	</text>
</svg>

svg-shape-text-2

筆者將 text 的屬性整理成一個簡單的表格：

text 屬性

屬性名稱 屬性說明
x 起始點 x 軸的座標
y 起始點 y 軸的座標
dx 座標的 x 軸偏移位置
dy 座標的 y 軸偏移位置
rotate 旋轉偏移的角度
textLength 元素的長度，這會影響輸出的寬度
transform 文字的變形效果，類似 css 中的 transform

[ 標籤： ]

1 筆針對 [SVG]SVG 基本圖形 - 文字 text 的迴響

發表迴響