SVG：初步學習感想

熊文俊發表於2019-03-17
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="" 表示文字基點距離主體左上角的距離-->複製程式碼

效果：

SVG：初步學習感想

上述圖片所用的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類選擇器中新增了這條屬性。複製程式碼

效果變成了下述圖片：SVG：初步學習感想

stroke-dasharray: 5 6 10;變更了屬性效果複製程式碼

SVG：初步學習感想

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

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

大家比對一下，就可以理解了。

stroke-dashoffset屬性

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

SVG：初步學習感想

對比一下會發現虛線沿著字型逆時針移動了一點，而實現這個操作的是下述程式碼：

stroke-dashoffset: 5;複製程式碼

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

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

偏移效果由一個注意點：

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

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

SVG：初步學習感想

這個圓比作你整體的虛實線相加，假設方框是我們可以看到的部分。

如果圖形偏移過半是下述這樣

SVG：初步學習感想

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

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

SVG：初步學習感想

看了下一上面的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>複製程式碼

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



相關文章