我欲封天耳根小说零,盗墓笔记小说下载,有声小说下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

一篇文章帶你了解SVG元素

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

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

一、tspan簡(jiǎn)單案例分析

 
 
 
 
  
  
  
    
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">   
  
  
     
  
  
        
  
  
         tspan line 1   
  
  
         tspan line 2

運(yùn)行效果:

注意

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

二、定位

1. 垂直定位

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

 
 
 
 
  
  
  
    
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">   
  
  
     
  
  
        
  
  
         tspan line 1   
  
  
         tspan line 2

運(yùn)行效果：

注：

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

例：

 
 
 
 
  
  
  
    
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">   
  
  
            
  
  
                
  
  
                123

運(yùn)行效果：

注:

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

2. 水平定位

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

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

例(請(qǐng)注意，現(xiàn)在第二行文本相對(duì)于第一行文本的末尾(不是開(kāi)頭)顯示30個(gè)像素)

 
 
 
 
  
  
  
    
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">   
  
  
     
  
  
        
  
  
         tspan line 1   
  
  
         tspan line 2

運(yùn)行效果：

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

例

 
 
 
 
  
  
  
    
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">   
  
  
      
  
  
     123

運(yùn)行效果：

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

示例

 
 
 
 
  
  
  
    
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">   
  
  
     
  
  
        
  
  
         tspan line 1   
  
  
         tspan line 2   
  
  
         tspan line 3

運(yùn)行效果：

三、樣式tspan元素

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

 
 
 
 
  
  
  
    
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink">   
  
  
    Here is a bold word.

運(yùn)行結(jié)果

四、基線偏移的上標(biāo)和下標(biāo)

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

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

示例

 
 
 
 
  
  
  
     
  
  
           
  
  
          Here is a text with    
  
  
          superscript   
  
  
          and subscript mixed with normal   
  
  
          text.

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

五、總結(jié)

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

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

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

網(wǎng)頁(yè)標(biāo)題：一篇文章帶你了解SVG元素
URL分享：http://m.fisionsoft.com.cn/article/dpgissd.html

新聞中心

其他資訊