如何发布网络小说,完结小说,完美世界txt下载

新聞中心

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

一篇文章帶你了解SVG marker 標(biāo)記

SVG標(biāo)簽用于標(biāo)簽行或路徑的開(kāi)始、中間和結(jié)尾。例如，可以用圓或正方形標(biāo)簽路徑的起點(diǎn)，用箭頭標(biāo)簽路徑的終點(diǎn)。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、撫州網(wǎng)站維護(hù)、網(wǎng)站推廣。

marker元素定義了在特定的元素、元素、元素或者元素上繪制的箭頭或者多邊標(biāo)簽圖形。

一、Marker 簡(jiǎn)單案例

標(biāo)記是使用元素創(chuàng)建的。

元素必須嵌套在一個(gè)元素內(nèi)。元素通常為SVG圖像保留一組可重復(fù)使用的定義。

例

注：

其中包含兩個(gè) 元素的元素。

這兩個(gè)元素定義了上圖中顯示的開(kāi)始和結(jié)束標(biāo)記。其次，注意元素如何使用mark-start和marker-end CSS屬性從其style屬性內(nèi)引用兩個(gè)元素。這就是為給定路徑指定要使用的標(biāo)記的方式。

二、常見(jiàn)的標(biāo)記

1. 定義標(biāo)記

可以使用元素定義標(biāo)記。

例:

2. 自動(dòng)定向

定義了用作路徑箭頭的三角形。

例

 
 
 
   
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
     
  
  
    
  
  
  
                      marker-start: url(#markerSquare);   
  
  
                        marker-end: url(#markerArrow);   
  
  
                        marker-mid: url(#markerSquare);   
  
  
                      ">   
  
  
     
  
  
    
  
  
  
                      marker-start: url(#markerSquare); /* 開(kāi)始點(diǎn) */   
  
  
                        marker-end: url(#markerArrow);   /* 中間點(diǎn) */   
  
  
                        marker-mid: url(#markerSquare); /*結(jié)束點(diǎn) */   
  
  
                      ">   
  
  
     
  
  
     
  
  
    
  
  
  
                      marker-start: url(#markerSquare);   
  
  
                        marker-end: url(#markerArrow);   
  
  
                        marker-mid: url(#markerSquare);   
  
  
                      ">   
  
  
     
  
  
    
  
  
  
                      marker-start: url(#markerSquare);   
  
  
                        marker-end: url(#markerArrow);   
  
  
                        marker-mid: url(#markerSquare);   
  
  
                      ">   
  
  
     
  
  
    
  
  
  
                      marker-start: url(#markerSquare);    
  
  
                        marker-end: url(#markerArrow);   
  
  
                        marker-mid: url(#markerSquare);   
  
  
                      ">

下面的圖像 :

顯示了具有不同坡度的五條線，它們都使用相同的兩個(gè)標(biāo)記作為開(kāi)始標(biāo)記和結(jié)束標(biāo)記。請(qǐng)注意，標(biāo)記如何自動(dòng)旋轉(zhuǎn)以適應(yīng)使用它們的直線的坡度。

運(yùn)行效果：

代碼解析

元素中的將繪制一個(gè)尖端指向右側(cè)的三角形。但是，如果路徑不是水平線，則需要旋轉(zhuǎn)三角形，使其適合使用它的路徑的方向。

可以通過(guò)將“方向”(orient)屬性設(shè)定為“自動(dòng)”(auto)來(lái)執(zhí)行此操作。它將旋轉(zhuǎn)元素內(nèi)的形狀以適合引用它的路徑。

這是將元素中的orient屬性設(shè)置為auto的結(jié)果。也可以將orient屬性的值設(shè)定為固定的度數(shù)(例如45度)。這將使標(biāo)記在使用時(shí)旋轉(zhuǎn)該度數(shù)。

3. 從其他形狀引用標(biāo)記

3.1 思路

元素不是唯一可以使用標(biāo)記的SVG元素。

，和元素也可以使用標(biāo)記。它們以與元素完全相同的方式進(jìn)行操作：通過(guò)在標(biāo)記開(kāi)始，標(biāo)記中間和標(biāo)記結(jié)束（分別為：marker-start，marker-mid和marker-end）CSS屬性中引用元素的id屬性。

3.2 標(biāo)記單位

（可以將標(biāo)記的大小設(shè)置為縮放，以適合使用它的路徑的描邊寬度）。

例：

通過(guò)將元素的markerUnits設(shè)置為strokeWidth，可以實(shí)現(xiàn)此效果。這實(shí)際上是該屬性的默認(rèn)值，因此，即使您未設(shè)置markerUnits屬性，這也是默認(rèn)行為。

代碼：

 
 
 
   
  
  
    
  
  
  
   orient="auto" markerUnits="strokeWidth">

為避免自動(dòng)縮放標(biāo)記以使其適應(yīng)路徑的筆觸寬度，請(qǐng)將markerUnits屬性設(shè)置為userSpaceOnUse。這樣，無(wú)論使用它的路徑的筆觸寬度如何，標(biāo)記都將保持其大小。

三、總結(jié)

文章基于HTML基礎(chǔ)，介紹了SVG中marker標(biāo)簽常見(jiàn)的用法。在實(shí)際應(yīng)用中常見(jiàn)的標(biāo)簽樣式，對(duì)每一種樣式如何生成，都通過(guò)案例的分析進(jìn)行了詳細(xì)的講解。

希望通過(guò)文章的學(xué)習(xí)，能夠讓讀者更好的理解SVG。

分享名稱：一篇文章帶你了解SVG marker 標(biāo)記
文章源于：http://www.fisionsoft.com.cn/article/cdcesic.html

新聞中心

其他資訊