成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

一篇文章帶你了解SVG 文本效果

作者：前端進階者
開發 前端
本文基于Html基礎，詳細的介紹了SVG中常見的文本效果，如何變換文字，如何在文本，如何添加文字超鏈接等等。

[[389752]]

一、前言

SVG <text> 元素用于在SVG圖像中繪制文本。在svg中使用<text> 元素,可以實現繪制文字,文字旋轉,多行文字,具有超級鏈接的文字等。

二、基本文本

要繪制文本，使用<text>元素。

例：

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <title>項目</title> 
  4.  
  5.   <body style="background-color: aqua;"> 
  6.     <h1>SVG Text</h1> 
  7.     <svg width="550" height="150"> 
  8.       <g> 
  9.         <text x="40" y="23">Text: </text> 
  10.         <text x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/ </text> 
  11.       </g> 
  12.     </svg> 
  13.   </body> 
  14. </html> 

運行后效果如下:

代碼解釋

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

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

三、旋轉文字

用于創建旋轉文本。

例：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <body style="background-color: aqua;"> 
  4.  
  5. <svg height="100" width="200"> 
  6. <text x="0" y="15" fill="red" transform="rotate(30 20,40)">http://pdcfighting.com/</text> 
  7. </svg> 
  8.  
  9. </body> 
  10. </html> 

運行后效果如下:

用法解釋

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

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

四、多行文字

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

例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <body style="background-color: aqua;"> 
  4.  
  5. <svg width="570" height="100"> 
  6. <g> 
  7. <text x="40" y="23">Multiline Text: </text> 
  8. <text x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/ 
  9. <tspan x="40" y="60" font-weight="bold">ddaad</tspan> 
  10. </text> 
  11. </g> 
  12. </svg> 
  13.  
  14. </body> 
  15. </html> 

運行后效果如下:

用法解釋

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

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

五、超級鏈接文字

用于創建具有超級鏈接的文本

示例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <body style="background-color: aqua;"> 
  4.  
  5. <svg width="500" height="100"> 
  6. <g> 
  7. <text x="20" y="10">Text as Link: </text> 
  8.  
  9. <a xlink:href="http://pdcfighting.com/" target="_blank"> 
  10. <text font-family="Verdana" font-size="30" x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/</text> 
  11. </a> 
  12. </g> 
  13. </svg> 
  14.  
  15. </body> 
  16. </html> 

運行后效果如下:

六、路徑上的文字

下面是SVG代碼：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <body style="background-color: aqua;"> 
  4.  
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  6. <defs> 
  7. <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /> 
  8. </defs> 
  9. <text x="10" y="100" style="fill:red;"> 
  10. <textPath xlink:href="#path1">I love SVG I love SVG</textPath> 
  11. </text> 
  12. </svg> 
  13.  
  14. </body> 
  15. </html> 

運行效果如下：

七、總結

本文基于Html基礎，詳細的介紹了SVG中常見的文本效果，如何變換文字，如何在文本，如何添加文字超鏈接等等。

歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

代碼很簡單，希望對你學習有幫助。

 

責任編輯：姜華 來源： 前端進階學習交流
SVGHtml基礎SVG圖像
相關推薦

2020-12-08 08:09:49

SVG圖標Web

2021-02-26 20:01:57

SVG濾鏡元素

2022-05-13 16:21:38

javascrip腳本SVG

2020-12-25 09:42:51

SVGtspanSVG基礎

2021-01-04 10:14:42

SVG標簽元素

2021-02-05 18:36:15

SVG形狀屬性

2020-12-15 08:15:34

SVG元素路徑

2021-01-01 09:18:48

SVG圖像元素

2020-12-29 09:39:38

元素屬性定位

2020-12-23 08:12:08

javascriptSVG腳本SVG元素

2021-02-23 06:51:16

SVGstrokeHtml基礎

2020-12-11 08:39:14

SVG代碼剪切

2020-12-04 08:40:29

SVG動畫元素

2021-05-31 09:30:36

Css前端CSS 特效

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平臺

2020-11-10 10:48:10

JavaScript屬性對象

2021-06-04 09:56:01

JavaScript 前端switch

2021-01-29 18:41:16

JavaScript函數語法

2021-02-02 18:39:05

JavaScript
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 午夜免费视频 | 国产在线精品区 | 天天操天天怕 | 免费艹逼视频 | 精品国产欧美一区二区三区不卡 | 国产九一精品 | 青青草av | 99热播精品 | 在线亚洲人成电影网站色www | 免费视频99| 色av一区 | 色婷婷九月 | av天空| 精品一区二区三区视频在线观看 | 在线黄av | 精品久久香蕉国产线看观看亚洲 | 亚洲高清视频一区 | 97超碰成人 | 色婷婷久久久久swag精品 | 国产一区二区日韩 | 国产精品美女久久久久久久久久久 | 午夜影院在线观看 | 精品在线一区 | 99久久日韩精品免费热麻豆美女 | 欧美黑人一级爽快片淫片高清 | com.色.www在线观看 | 啪视频在线 | 欧美三级电影在线播放 | 一级黄色片网址 | 做a视频在线观看 | 欧美日韩专区 | 国产成人精品a视频一区www | 老外黄色一级片 | 91久久精品国产免费一区 | 久久久精品一区 | 成人在线免费观看视频 | 成人在线视频免费播放 | 精品国产一区二区三区久久 | 精品久久久久久久久久久久久久 | 欧美精品一区二区三区四区五区 | 国产一级毛片视频 |