一篇文章帶你了解SVG 文本效果
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
一、前言
SVG <text>元素用于在SVG圖像中繪制文本。在svg中使用 <text>元素,可以實(shí)現(xiàn)繪制文字,文字旋轉(zhuǎn),多行文字,具有超級(jí)鏈接的文字等。
二、基本文本
要繪制文本，使用<text>元素。
例：
<html><title>項(xiàng)目</title><body style="background-color: aqua;"><h1>SVG Text</h1><svg width="550" height="150"><g><text x="40" y="23">Text: </text><text x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/ </text></g></svg></body></html>
運(yùn)行后效果如下:
代碼解釋
x：定義了文本左上角的位置 ，y：定義文本的頂部位置，width：定義寬度，height：定義高度。
fill：fill屬性用于定義填充顏色。
三、旋轉(zhuǎn)文字
用于創(chuàng)建旋轉(zhuǎn)文本。
例：
<html><body style="background-color: aqua;"><svg height="100" width="200"><text x="0" y="15" fill="red" transform="rotate(30 20,40)">http://pdcfighting.com/</text></svg></body></html>
運(yùn)行后效果如下:
用法解釋
x：定義左上角的位置。y：它定義頂部位置。width：定義寬度。height：定義高度。
fill：fill屬性用于定義填充顏色。
四、多行文字
元素可以安排任何分小組與<tspan> 元素的數(shù)量。每個(gè)<tspan> 元素可以包含不同的格式和位置。幾行文本(與 <tspan> 元素)。
例
<html><body style="background-color: aqua;"><svg width="570" height="100"><g><text x="40" y="23">Multiline Text: </text><text x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/<tspan x="40" y="60" font-weight="bold">ddaad</tspan></text></g></svg></body></html>
運(yùn)行后效果如下:
用法解釋
x：定義左上角的位置。y：它定義頂部位置。width：定義寬度。height：定義高度。
fill：fill屬性用于定義填充顏色。
五、超級(jí)鏈接文字
用于創(chuàng)建具有超級(jí)鏈接的文本。
示例
<html><body style="background-color: aqua;"><svg width="500" height="100"><g><text x="20" y="10">Text as Link: </text><a xlink:href="http://pdcfighting.com/" target="_blank"><text font-family="Verdana" font-size="30" x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/</text></a></g></svg></body></html>
運(yùn)行后效果如下:
六、路徑上的文字
下面是SVG代碼：
<html><body style="background-color: aqua;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="path1" d="M75,20 a1,1 0 0,0 100,0" /></defs><text x="10" y="100" style="fill:red;"><textPath xlink:href="#path1">I love SVG I love SVG</textPath></text></svg></body></html>
運(yùn)行效果如下：
七、總結(jié)
本文基于Html基礎(chǔ)，詳細(xì)的介紹了SVG中常見的文本效果，如何變換文字，如何在文本，如何添加文字超鏈接等等。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬水千山總是情，點(diǎn)個(gè)【在看】行不行