[[389752]]

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的兩當(dāng)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

一、前言

SVG 元素用于在SVG圖像中繪制文本。在svg中使用 元素,可以實(shí)現(xiàn)繪制文字,文字旋轉(zhuǎn),多行文字,具有超級(jí)鏈接的文字等。

二、基本文本

要繪制文本，使用 元素。

例：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
 
  
  
  
  
   
  
  
  
  
    
SVG Text
 
  
  
  
  
     
  
  
  
  
       
  
  
  
  
        Text:  
  
  
  
  
        http://pdcfighting.com/  
  
  
  
  
       
  
  
  
  
     
  
  
  
  
   
  
  
  
  
 
 
 
 
 

運(yùn)行后效果如下:

代碼解釋

x：定義了文本左上角的位置 ，y：定義文本的頂部位置，width：定義寬度，height：定義高度。

fill：fill屬性用于定義填充顏色。

三、旋轉(zhuǎn)文字

用于創(chuàng)建旋轉(zhuǎn)文本。

例：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
http://pdcfighting.com/ 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

運(yùn)行后效果如下:

用法解釋

x：定義左上角的位置。y：它定義頂部位置。width：定義寬度。height：定義高度。

fill：fill屬性用于定義填充顏色。

四、多行文字

元素可以安排任何分小組與 元素的數(shù)量。每個(gè) 元素可以包含不同的格式和位置。幾行文本(與 元素)。

例

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
Multiline Text:  
  
  
  
  
http://pdcfighting.com/ 
  
  
  
  
ddaad 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

運(yùn)行后效果如下:

用法解釋

x：定義左上角的位置。y：它定義頂部位置。width：定義寬度。height：定義高度。

fill：fill屬性用于定義填充顏色。

五、超級(jí)鏈接文字

用于創(chuàng)建具有超級(jí)鏈接的文本

示例

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
Text as Link:  
  
  
  
  
 
  
  
  
  
 
  
  
  
  
http://pdcfighting.com/ 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

運(yùn)行后效果如下:

六、路徑上的文字

下面是SVG代碼：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
I love SVG I love SVG 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

運(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í)有幫助。

 

名稱欄目：一篇文章帶你了解SVG文本效果
網(wǎng)頁URL：http://www.dlmjj.cn/article/cohdpdh.html