2019年7月15日 星期一

svg 的文字- text

要在 svg 裡繪製文字需要使用 text 的標籤,這邊可以替文字設定外框及填滿顏色,是跟一般網頁文字比較不一樣的地方。

See the Pen
svg text
by deathhell (@deathhell)
on CodePen.



還可以使用以下屬性調整文字樣式
font-family: 字型
font-weight: 文字粗細
font-style: 大概就是正常跟斜體
text-decoration: 文字裝飾,有 none, underline, overline, line-through 可以用
word-spacing: 字與字的間距
letter-spacing: 字母與字母的間距


可以用 text-anchor 調整文字對齊位置,跟 text-align 不大一樣大家可以注意一下

See the Pen
svg text-anchor
by deathhell (@deathhell)
on CodePen.


在 html 內想要調整某段文字的樣式,我們可以利用 span 包起來後再設定,而 svg 的 text 則可以使用 tspan 這個標籤。

See the Pen
svg text 2
by deathhell (@deathhell)
on CodePen.


設定 dy 可以調整垂直位置

See the Pen
svg text 3
by deathhell (@deathhell)
on CodePen.


寫在一起可以個別影響每個字母

See the Pen
svg text 3
by deathhell (@deathhell)
on CodePen.




反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...