最近的學習中，對於svg實現的文字霓虹燈動畫感到很是有趣，而且實現起來也相對著來說比較容易，效果也不錯，比如下圖。
stroke-dasharray
官方解釋為It's a list of comma and/or white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.;--MDN
翻譯過來就是它是一個用逗號或者空白隔開的length和percentage數列，length指定了短劃線的長度，percentage指定了缺口的長度。如果提供了奇數個值，則這個值的數列重複一次，從而變成偶數個值。所以，如果為4，等同於4, 4 ;5,3,2等同於5,3,2,5,3,2；如下面的示例所示。
<svg viewBox="0 0 30 15" xmlns="http://www.w3.org/2000/svg">
<!-- 當沒有兩個屬性時 -->
<line x1="0" y1="1" x2="30" y2="1" stroke="black" />
<!-- 當兩個屬性相等時，平分 -->
<line x1="0" y1="3" x2="30" y2="3" stroke="black"
stroke-dasharray="4" />
<!-- 當兩個屬性不相同時-->
<line x1="0" y1="5" x2="30" y2="5" stroke="black"
stroke-dasharray="4 1" />
<!-- 當屬性個數為奇數時，4 1 2 會變為 4 1 2 4 1 2 這樣的排布順序 這些數值
會按短劃線長度 缺口的長度這樣子排佈下去 -->
<line x1="0" y1="7" x2="30" y2="7" stroke="black"
stroke-dasharray="4 1 2" />
<!-- 當屬性個數為偶數時，會按4 1 2 3 4 1 2 3 排布 -->
<line x1="0" y1="9" x2="30" y2="9" stroke="black"
stroke-dasharray="4 1 2 3" />
</svg>
複製程式碼也可以這樣子想象，這是一個數列，這個數列由迴圈的兩個不同key構成，也就是 const dasharray = {length, percentage,length, percentage,length, percentage...}，length指定了短劃線的長度，percentage指定了缺口的長度，然後將stroke-dasharray後的數值迴圈的進行賦值。所以可以得出以下結論
stroke-dasharray：4 1 的話就是const dasharray = {length：4, percentage：1,length：4, percentage：1,length：4, percentage：1...}
stroke-dasharray：4 1 2 就是const dasharray = {length：4, percentage：1,length：2, percentage：4,length：1, percentage：2...}
stroke-dashoffset
The stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array.--MDN
翻譯過來簡單來說就是這個屬性設定了與之關聯的dash陣列的偏移量。也就是上面的stroke-dasharray屬性中這個數列。這個屬性相對於繪製的起點偏移的量，正值(向右或者順時針偏移)，負值(向左或者逆時針）。
以下是示例來表示紅色相對於黑色的線段偏移。
<line x1="0" y1="7" x2="30" y2="7" stroke="black"
stroke-dasharray="3 1" />
<line x1="0" y1="9" x2="30" y2="9" stroke="rgba(255,0,0,.5)"
stroke-dasharray="3 1"
stroke-dashoffset="-3" />
<line x1="0" y1="11" x2="30" y2="11" stroke="black"
stroke-dasharray="3 1" />
<line x1="0" y1="13" x2="30" y2="13" stroke="rgba(255,0,0,.5)"
stroke-dasharray="3 1"
stroke-dashoffset="1" />
複製程式碼
<svg viewBox="-3 0 33 20" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="10" cy="10" rx="5" ry="5" fill="none" stroke=#000
stroke-dasharray="4" stroke-dashoffset= "0" stroke-width=1 ></ellipse> <!--同等大小不同顏色紅色的圓形順時針環繞4份-->
<ellipse cx="10" cy="10" rx="5" ry="5" fill="none" stroke=red
stroke-dasharray="4" stroke-dashoffset= "4" stroke-width=1></ellipse>
</svg>
複製程式碼
讓我們動手做個線條動畫吧
有了上面的知識， 我們還需要補充一點知識。
- d:這個標籤後是整個路徑的集合
- stroke:路徑的顏色
- stroke-width:路徑的寬度
- fill:形狀的填充顏色
- polyline：標籤用來建立僅包含直線的形狀
現在我們就可以去製作一些線條動畫了，這樣也可以加深我們對上面兩個屬性的理解。 整體思路是這樣的。先畫好路徑，然後量出這段路徑的長度， 然後用css3的animation設定stroke-dasharray來使得svg影象發生動畫。
首先線條動畫需要設定一個路徑，這裡我們可以自由設定。筆者是在AI上用鋼筆畫的一個路徑。設定的是隻用了直線的polyline標籤。其他的可以用標籤path來標記。
<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<!--設定畫板為400*400，視窗左上角座標為0 0，視窗為400*400-->
<polyline stroke="black" stroke-width="3px" fill="none" points="0.34 0.37 70.47 64.62 187 52.19 187.34 128.87 298.03 122.44 357.85 11.93"></polyline>
</svg>
複製程式碼
var path = document.querySelector(.cls);
var length = path.getTotalLength();
console.log(length);// 控制檯裡得到長度為525.52
複製程式碼設定animation屬性
.cls{
animation: move 3s linear infinite;
}
@keyframes move{
0%{
stroke-dasharray: 0 525.52px;
}
100%{
stroke-dasharray: 525.52px;
}
}
複製程式碼這樣子我們的簡單線條效果就出來了
.cls{
animation: move 5s linear infinite;
}
@keyframes move{
0%{
stroke-dasharray: 0 525.52px;
stroke:red;
}
50%{
stroke-dasharray: 262.75px;
stroke: blue;
}
100%{
stroke-dasharray: 525.52px;
stroke: yellow;
}
}
複製程式碼
而svg的霓虹燈效果也是藉助stroke-dasharray與stroke-dashoffset來實現的。 這裡用到了symbol和g標籤
- symbol 類似於一個組合，但是擁有一些額外的特性。通常被置於
標籤中便於複用。除了組合之外，你也可以使用模板來定義你的圖示。模板幾乎和組合一樣，但是你可以獲得額外的設定來控制視口（viewbox）和長寬比。 - g 將多種形狀組合起來。將組合後的形狀置於
中可以讓它能夠被複用。
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><!--xmlns名稱空間,和html分離-->
<symbol id="text">
<text x="30%" y="35%" class="text">我愛你，如風走了幾萬裡，不問歸期</text>
</symbol>
<g>
<use xlink:href="#text" class="use-text"></use>
<use xlink:href="#text" class="use-text"></use>
<use xlink:href="#text" class="use-text"></use>
<use xlink:href="#text" class="use-text"></use>
<use xlink:href="#text" class="use-text"></use>
</g>
</svg>
複製程式碼利用stroke-dasharray與stroke-dashoffset屬性可以得到這樣子的效果，這裡面的五種顏色是利用stroke-dashoffset來控制偏移量總的為35%，然後每個顏色的偏移量為7%,而每個顏色佔其中的35分之7.所以每個文字路徑的每百分之35中有5種佔比為7%的顏色存在。
*{
margin: 0;
padding: 0;
}
.text{
font-size: 100px;
}
svg{
position: absolute;
/* margin-left: 10px; */
width: 100%;
height: 100%;
background-color: #000;
}
.use-text{
fill: none;
stroke: white;
stroke-dashoffset: 35%;
stroke-dasharray: 0 87.5%;
stroke-width: 2px;
}
.use-text:nth-child(1) {
stroke: #360745;
animation: animation1 8s infinite ease-in-out forwards;
}
.use-text:nth-child(2) {
stroke: #D61C59;
animation: animation2 8s infinite ease-in-out forwards;
}
.use-text:nth-child(3) {
stroke: #E7D84B;
animation: animation3 8s infinite ease-in-out forwards;
}
.use-text:nth-child(4) {
stroke: #EFEAC5;
animation: animation4 8s infinite ease-in-out forwards;
}
.use-text:nth-child(5) {
stroke: #1B8798;
animation: animation5 8s infinite ease-in-out forwards;
}
@keyframes animation1 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 7%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 7%;
}
}
@keyframes animation2 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 14%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 14%;
}
}
@keyframes animation3 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 21%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 21%;
}
}
@keyframes animation4 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 28%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 28%;
}
}
@keyframes animation5 {
50%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 35%;
}
70%{
stroke-dasharray: 7% 28%;
stroke-dashoffset: 35%;
}
}
</style>
複製程式碼所以這就成為了這裡的特效。