SVG：初步學習感想

在初步學習和了解svg後，我對svg的學習有了一些感想，但願簡單敘述一下。

這是個人第一篇文章，若有錯誤還請諒解，錯誤請盡情指正，十分感謝。

svg 是一種以數學形式達成相似繪圖板同樣的組件，可使咱們在頁面上本身‘畫’出想要的圖案。 

 svg標籤是告訴瀏覽器這個組件內部全是專有標籤。 

 svg標籤的使用中，須要的屬性有svg繪圖區域的大小即寬高。其次要表示遵循那個標準，經常使用的是添加xmlns="http://www.w3.org/2000/svg"。 

 svg中有不少基礎圖形標籤

例如：圓（與橢圓公用一個標籤）、直線、折線等。 

 <line>直線標籤 數學上兩點確認一個直線，那麼line標籤必需的就是這兩個點。

那麼line標籤的屬性有 點1:x1="" y1="" 點2：x2="" y2=""; 

 <ellipse> 圓(橢圓)標籤  圓的確認須要的是圓心和半徑，可是因爲圓和橢圓公用一個標籤（在數學上圓是特殊的橢圓）， 因此要畫橢圓所須要的屬性不要像數學定義同樣到兩定點的距離等於定長。

只須要 圓的中心點：cx="" cy="" x軸長：rx="" y軸長：ry="" 當x軸長=y周長時就是圓了 

 <rect>矩形標籤 定義一個矩形須要的是一個定點確認位置和矩形的長寬。 

 左上角頂點： x="" y="" 長：width="" 寬：height="" 

 <polyline>折線標籤 折線的定義就是多個點的定義 

 他須要的屬性是 points=" a b a1 b1 a2 b2 ..." 這些的是點(a,b)連接點(a1,b1)連接點(a2,b2)。按照寫的順序連接。 

 上面說完了我學了的一點標籤，接下來講一說基礎共同屬性。

共同屬性     

stroke屬性： 字面意思是衝程劃，它實際的做用是描邊。

<style>
svg{        stroke:#000; stroke-width: 5;/*描邊寬度*/ stroke-linecap: round;/*一行的兩端變成半圓形*/ stroke-linejoin: round;/*兩端的拐點變成弧形，包括文字*/ fill:none; }/*svg的樣式*//*樣式重置和html和body的大小設置不在這寫是100%*/
.text{font-size: 64px;/*定義字體大小64px*/
font-weight: bold;/*文字加粗*/
text-transform: uppercase;/文字變大寫*/
stroke:#abcdef;/**定義描邊顏色/
}</style>
<text text-anchor="middle" x="200px" y="200px" class="text">the first</text>
<!-- text-anchor="middle" 是表示文本基點在中心  x="" y="" 表示文本基點距離主體左上角的距離-->複製代碼

效果：

上述圖片所用的stoke屬性有 stroke設置描邊顏色，stroke-width設置描邊寬度，stroke-linecap設置結尾路徑的形式有butt(內縮平端)、round(半圓形端)、square(外延平端)，stroke-linejoin設置兩條相連線段的拐點。

stroke-dasharray屬性

stroke-dasharray屬性：dasharray單詞的意思是無序的雜亂的，在stroke中的屬性是設置實線的空白斷口。

stroke-dasharray屬性的參數是不固定的。

stroke-dasharray：a b c d ...... ； 這個參數表明的是從開始口，a長度的實線，b長度的空白斷口，c長度的實線，d長度的空白斷口。 有人會問那不是要寫很長的參數列表。其實不是的他會按照你寫的規律不斷的重複知道將你全部長度的描邊應用到了樣式。

那麼就有問題了，我虛線和實線設置的長度之和不必定徹底等於描邊的長度啊，其實stroke-dasharray會按照參數不斷的生成(按照參數不斷的拼接)，基本是確定有超出的部分，不過在超出的部分將沒法被看到被覆蓋了。閉合圖形的超出的部分同理也沒法被看到。

官方文檔給出了屬性說明：

它是一個 <length>和 <percentage>數列，數與數之間用逗號或者空白隔開，指定短劃線和缺口的長度。若是提供了奇數個值，則這個值的數列重複一次，從而變成偶數個值。所以， 5,3,2等同於 5,3,2,5,3,2

stroke-dasharray屬性識別的是偶數參數，空白斷口數和實線數要相同。

stroke-dasharray: 5 6; 在上述代碼.text類選擇器中添加了這條屬性。複製代碼

效果變成了下述圖片：

stroke-dasharray: 5 6 10;變動了屬性效果複製代碼

按照官方文檔的屬性應用的是：

stroke-dasharray: 5(實) 6(空) 10(實) 5(空) 6(實) 10(空);複製代碼

你們比對一下，就能夠理解了。

stroke-dashoffset屬性

stroke-dashoffset的做用是偏移。那麼偏移是怎麼樣的效果，我先放一張圖片：

對比一下會發現虛線沿着字體逆時針移動了一點，而實現這個操做的是下述代碼：

stroke-dashoffset: 5;複製代碼

這樣可能就會理解做用了。

那麼偏移有什麼用呢，可能看起來沒什麼意義。可是配合計時器或者動做幀就會發生不一樣的做用，會造成動做效果。

偏移效果由一個注意點：

不要將空白部分設置的過大（有特殊用處除外）。

紅色是當作空白斷口部分，藍色則是實線部分

這個圓比做你總體的虛實線相加，假設方框是咱們能夠看到的部分。

若是圖形偏移過半是下述這樣

視角中(也就是方框內)發現沒有圖案了。

這是由於dasharray是將空白斷口和實線視爲一體，再用dashoffset時偏移會將實線偏移後後面接的是空白斷口，要將空白斷口偏移完纔會繼續出現實線。

看了下一上面的gif，會發現實線在到了尾端的時候會逐漸變短，這就是上面的所說的狀況，

在實線區域偏移到視圖外時，咱們看到的是以前隱藏的空白斷口區域，由於空白斷口設置的太長，長過了字體的能展示的總長，因此咱們看到的會有一段時間是空白，其實就是空白斷口在偏移的過程當中佔有了所有的窗口。

#由於是初學，因此可能有所錯誤，請盡情的指出，感謝閱讀。

參考 菜鳥教程 MDN文檔。

下面是我理解的實例的解析。

霓虹燈字體效果解析。(較長，下面是個人初步解析效果原理)

代碼塊：

/*樣式*/
<style>*{    
margin: 0;    
padding: 0;
}

.text{
/*公共樣式*/
/* 畫家 */    
font-size: 64px;    
font-weight: bold;    
/* 文字變大寫 */    
text-transform: uppercase;    
stroke: #3498db;/*描邊*/ 
stroke-width: 2;    
fill: none;/*填充*/    
stroke-linecap:round ;/*單行頂端半圓形*/    
stroke-linejoin: round;/*兩線段銜接點弧形*/    
stroke-dasharray: 90 310;/*90px長實現 310長虛線*/    
animation: stroke 6s infinite linear;/*建立動做 名字stroke 持續6s 不中止 線性*/
}

.text-1{     
stroke:#3498db; /* 陰影 */ 
text-shadow: 0 0 5px #3498db;/*藍色*/ 
/* 延時-1.5s == 提早1.5s運動 */    
animation-delay: -1.5s;}

.text-2{    
stroke: #f39c12; 
text-shadow: 0 0 5px #f39c12;/*橙色*/ 
animation-delay: -3s;
    /*提早3秒*/
}

.text-3{    
stroke: #e74c3c; 
text-shadow: 0 0 5px #e74c3c;/*紅色*/
/*提早4.5s*/    
animation-delay: -4.5s;
}
.text-4{    
stroke: #9b59b6; 
text-shadow: 0 0 5px #9b59b6;/*紫色*/
    /*提早6s*/    
animation-delay: -6s;
}
@keyframes stroke{    
100%{        
/* 偏移量 6s內順時針偏移400px；*/        
stroke-dashoffset: -400;    
}}
</style>
複製代碼

<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">   
<text text-anchor="middle" x="50%" y="50%" class="text text-1">segmentfailt.com</text>   
<text text-anchor="middle" x="50%" y="50%" class="text text-2">segmentfailt.com</text>   
<text text-anchor="middle" x="50%" y="50%" class="text text-3">segmentfailt.com</text>   
<text text-anchor="middle" x="50%" y="50%" class="text text-4">segmentfailt.com</text>
</svg>複製代碼

原理是四個相同基本徹底的文本字體在同一個位置。作相同的動做，每個文本的實線段長佔總長的一部分，讓其餘文本先開始偏移動做，第一個開始動做的文本實線部分後部分空白斷口被第二個開始動做的文本實現部分覆蓋了，第三個文本覆蓋了第二個的空白，第四個覆蓋了第三個空白，第四個的空白則由於第一個文本已經運行完畢了，第一個文本的實線覆蓋了第四個文本的空白，這就像是一個銜尾蛇，四段部分實線分別咬上一部分的實線部分。