SVG霓虹燈特效之stroke-dasharray與stroke-dashoffset詳解

時間 2019-12-09

標籤 svg 霓虹燈特效 stroke dasharray dashoffset 詳解简体版

原文原文鏈接

最近的學習中，對於svg實現的文字霓虹燈動畫感到非常有趣，並且實現起來也相對着來講比較容易，效果也不錯，好比下圖。css

須要實現以上的效果，咱們須要着重瞭解兩個svg的屬性 stroke-dasharray與 stroke-dashoffset。

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.;--MDNhtml

翻譯過來就是它是一個用逗號或者空白隔開的length和percentage數列，length指定了短劃線的長度，percentage指定了缺口的長度。若是提供了奇數個值，則這個值的數列重複一次，從而變成偶數個值。因此，若是爲4，等同於4, 4 ;5,3,2等同於5,3,2,5,3,2；以下面的示例所示。css3

<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...}bash

stroke-dasharray：4 1 2 就是const dasharray = {length：4, percentage：1,length：2, percentage：4,length：1, percentage：2...}ide

stroke-dashoffset

The stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array.--MDNsvg

翻譯過來簡單來講就是這個屬性設置了與之關聯的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>
複製代碼

因此這就成爲了這裏的特效。

這是我我的第一篇讀書筆記，這裏面參考了許多的文章而成，也算是一個小小的總結。這裏貼一篇本身如何用Ai導出svg的文章。有興趣的小夥伴能夠本身去試試，若是以爲安裝這些軟件太過麻煩的話，還能夠狠狠的點擊這個網站，這篇筆記主要仍是解釋stroke-dasharray與stroke-dashoffset，但願你們可以理解好。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。