日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一篇文章帶你了解SVG元素

 SVG 元素用于在SVG中繪制多行文本。不必絕對定位每行文本，該 元素使相對于前一行文本放置一行文本成為可能。該 元素還使用戶可以一次選擇并復(fù)制粘貼幾行文本，而不僅僅是一個text元素。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了鄱陽免費建站歡迎大家使用！

一、tspan簡單案例分析

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.     
    5.   
  
  
  
  5.        tspan line 1 
    6.   
  
  
  
  6.        tspan line 2 
    7.   
  
  
  
  7.     
    8.   
  
  
  
  8.  
    9.

運行效果:

 

注意

結(jié)果如何導(dǎo)致文本行相對于彼此(彼此之后)定位。

二、定位

1. 垂直定位

如果希望將線垂直相對放置，可以使用dy 屬性(delta y)?，F(xiàn)在，由于dy第二個 元素的屬性設(shè)置為“ 10” ，因此第二行文本顯示在第一行文本下方10個像素處。 

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.     
    5.   
  
  
  
  5.        tspan line 1 
    6.   
  
  
  
  6.        tspan line 2 
    7.   
  
  
  
  7.     
    8.   
  
  
  
  8.  
    9.

運行效果：

注：

如果要將 元素定位 在絕對y位置y ，請像對待 元素一樣使用屬性。如果在dy屬性內(nèi)寫入多個數(shù)字，則每個數(shù)字都將應(yīng)用于 元素內(nèi)文本的字符。

例：

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    3.   
  
  
  
  3.         
    4.   
  
  
  
  4.             
    5.   
  
  
  
  5.               123 
    6.   
  
  
  
  6.             
    7.   
  
  
  
  7.         
    8.   
  
  
  
  8.  
    9.

運行效果：

注:

字形之間的垂直間距現(xiàn)在是如何變化的。

2. 水平定位

要將文本相對定位在x軸上，可以使用dx屬性(delta x)。

下面的示例顯示了設(shè)置dx為30 的效果。

例(請注意，現(xiàn)在第二行文本相對于第一行文本的末尾(不是開頭)顯示30個像素)

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.     
    5.   
  
  
  
  5.        tspan line 1 
    6.   
  
  
  
  6.        tspan line 2 
    7.   
  
  
  
  7.     
    8.   
  
  
  
  8.  
    9.

運行效果：

如果在dx屬性內(nèi)指定多個數(shù)字，則每個數(shù)字將應(yīng)用于 元素內(nèi)的每個字母。

例

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4.    123 
    5.   
  
  
  
  5.   
    6.   
  
  
  
  6.  
    7.

運行效果：

還可以設(shè)置x屬性以固定文本行的x坐標。如果要在彼此下方顯示所有未調(diào)整的行的列表，這將很有用。這是一個x在三行中設(shè)置為10 的示例：

示例

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.     
    5.   
  
  
  
  5.        tspan line 1 
    6.   
  
  
  
  6.        tspan line 2 
    7.   
  
  
  
  7.        tspan line 3 
    8.   
  
  
  
  8.     
    9.   
  
  
  
  9.  
    10.

運行效果：

三、樣式tspan元素

可以 單獨設(shè)置元素樣式。因此，可以使用 元素來設(shè)置文本塊的樣式，以使其不同于其余文本。 

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    3.   
  
  
  
  3.   Here is a bold word. 
    4.   
  
  
  
  4.  
    5.

運行結(jié)果

四、基線偏移的上標和下標

可以使用baseline-shiftCSS屬性使用 元素創(chuàng)建上標和下標 。

這是一個SVG baseline-shift示例，顯示了如何：

示例

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.        
    3.   
  
  
  
  3.         Here is a text with  
    4.   
  
  
  
  4.         superscript 
    5.   
  
  
  
  5.         and subscript mixed with normal 
    6.   
  
  
  
  6.         text. 
    7.   
  
  
  
  7.        
    8.   
  
  
  
  8.  
    9.

運行效果：(注意:firefox可能不支持)

五、總結(jié)

本文基于SVG基礎(chǔ)，介紹了有關(guān)的元素定位，改變不同的屬性，實現(xiàn)不一樣的位置顯示效果。以及實際項目應(yīng)用中基線偏移的上標和下標的應(yīng)用。本文運用豐富的效果圖展示，能夠讓讀者更好的理解。

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

代碼很簡單，希望對你學(xué)習(xí)有幫助。


本文名稱：一篇文章帶你了解SVG元素
鏈接URL：http://www.dlmjj.cn/article/dpgissd.html