Home » SVG 入門教學

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

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

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 進行關聯,來產生文字輸出時的路徑變化:

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

[ 標籤: ]

發表迴響