SVG（可縮放向量圖形）虛線相關屬性與線條動畫原理：一條會動的線

SVG可以實現非常酷的線條動畫

甚至是這樣的網頁傳送門

---

#我們可以先來實作一個簡單的SVG線條動畫
像這樣

#不要急，在此之前我們需要先了解一些屬性值

虛線屬性

虛線屬性包括兩個stroke-dasharray與stroke-dashoffset

stroke-dasharray

大家來看下面的例子

 <svg width=300 height=300 viewbox="0 0 30 30">
    <path id="path_a" d="M 5 10 L 25 10"></path>
    <path id="path_b" d="M 5 15 L 25 15"></path>
    <path id="path_c" d="M 5 20 L 25 20"></path></svg>

path {    
stroke: #000;}#path_a {    
stroke-dasharray: 1;}#path_b {    
stroke-dasharray: 1 2;}#path_c {   
 stroke-dasharray: 1 2 3;}

我分別對三條線段設定了不同的stroke-dasharray

#相信大家可以已經明白這個屬性是用來幹嘛的了
一個值，虛線畫1px -空1px-畫1px-空1px-……
兩個值，虛線畫1px-空2px-畫1px-空2px-……
三個值，虛線畫1px-空2px-畫3px -空1px-……
內部就是一個循環

stroke-dashoffset

這個屬性便是調整虛線的位置

<svg width=300 height=300 viewbox="0 0 30 30">
    <path id="path_a" d="M 5 10 L 25 10"></path>
    <path id="path_b" d="M 5 15 L 25 15"></path>
    <path id="path_c" d="M 5 20 L 25 20"></path></svg>

path {    
stroke: #000;    
stroke-dasharray: 5;    
}#path_a {    
stroke-dashoffset: 2;}#path_b {    
stroke-dashoffset: 0;}#path_c {    
stroke-dashoffset: -2;}

#如果值為正數，那麼虛線向後移動
值為負數，虛線向前移動
px單位可寫可不寫

簡單的SVG線條動畫

了解了上面的虛線相關屬性
我們就可以配合CSS很輕鬆的實現上面最簡單線條動畫了
而且不需要JS（也不需要SMIL animation）
原理就在於修改stroke-dashoffset的值讓路徑慢慢展現

<svg width=300 height=300 viewbox="0 0 30 30">
    <path d="M 5 15 L 25 15"></path></svg>

path {    
stroke: #000;    
stroke-dasharray: 20px;    
stroke-dashoffset: 20px;    
animation: act 1s linear infinite alternate;}@keyframes act {
    100% {        
    stroke-dashoffset: 0;    }}

初始的時候設定stroke-dashoffset與stroke-dasharray線段的長度
這樣線段是看不到的
當使用animation動畫時，stroke-dashoffset又漸變為0
如果這裡再使用forwards屬性值，就可以實現線條的繪製動畫animation: act 1s linear forwards;
確實很巧妙的辦法

路徑長度取得

雖然我們上面的小例子沒有使用js
不過其實我們還是需要配合js實現更華麗、複雜的效果
再比如說我們的小例子中路徑的長度很容易知道
但是路徑長度未知的情況下怎麼辦呢
這就需要js了

var char = 'http://www.w3.org/2000/svg';var path = document.getElementsByTagNameNS(char, 'path')[0];
console.log(path.getTotalLength()); //20

除此之外還有一個getPointAtLength(x)可以取得路徑上距離起始點x的座標

（getElementsByTagNameNS用來取得XML標籤，其實這裡也可以用getElementsByTagName）

透過它我們可以配合js做一個稍微複雜的圖形

---

先畫一個閃電

<svg width="580" height="400">
    <path d="m262.59622,90.56177l34.74561,60.80042l-14.32703,7.17541l43.75135,52.09264l-14.32061,
    8.69967l54.08581,87.23186l-91.73919,-66.84884l17.49797,-9.28344l-57,-42.81731l20.425,-13.23194l-60.18379,-44.91723l67.06487,-38.90124z"></svg>

path {    stroke: #000;    fill: transparent;    stroke-width: 1.5px;}@keyframes act {
    100% {        stroke-dashoffset: 0;    }}

需要事先把@keyframes規則寫好

js腳本我們要做的就是獲取路徑長度
然後添加樣式

var char = 'http://www.w3.org/2000/svg',
    path = document.getElementsByTagNameNS(char, 'path')[0],    len = path.getTotalLength();

path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;
path.style.animation = 'act 2s linear forwards';

當然如果你想要實現更複雜酷炫的線條動畫
就需要更複雜的路徑和腳本了
例如下面的這個

 以上就是SVG（可縮放向量圖）虛線相關屬性與線條動畫原理：一條會動的線的內容，更多相關內容請關注PHP中文網（www.php.cn）！

#