svg描邊動畫原理

1. svg基本圖形有7種

矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>

其中，path能夠繪製任意圖形

2. svg描邊動畫原理

svg的描邊動畫就是利用stroke-dasharray和stroke-dashoffset兩個屬性值的變化來實現的。

2.1 stroke-dasharray用來畫虛線

stroke-dasharray: 實線長度 虛線長度，能夠設置多個值，奇數自動重複一遍補成偶數，即 stroke-dasharray: 10 等價於 stroke-dasharray: 10 10

2.2 stroke-dashoffset用來控制虛線的偏移

2.3 描邊動畫原理

 當stroke-dasharray和stroke-dashoffset都足夠大，大於線條的長度，則stroke-dashoffset從固定值變化到0的過程，線條就會從無到伸展到其長度。若是svg線條

爲path，則能夠實現任意複雜圖形的描邊動畫。

2.4 下面是幾個例子

2.4.1 鼠標hover畫直線

<svg>
　　<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320"/>
</svg>

#line{
    transition: all 2s;
    stroke-dashoffset: 300;
}
svg:hover #line{
    stroke-dashoffset: 0;
}

2.4.2 環形進度條

<svg  width="200" height="200" viewBox="0 0 200 200">
   <circle id="circle" cx="100" cy="80" r="50"  fill="gray" stroke-width="5" stroke="green" />
</svg>

#circle{
     transition: all 2s;
     stroke-dasharray:314; /*314爲環形周長*/
     stroke-dashoffset:314;
}
svg:hover #circle{
    stroke-dashoffset:0;
}

2.4.3 任意圖形的描邊動畫

path {  
  stroke-dasharray: 1000;  
  stroke-dashoffset: 1000;  
  animation: dash 5s linear infinite;  
}  
  
@keyframes dash {  
  to {  
    stroke-dashoffset: 0;  
  }  
}  

2.4.4 矩形虛線框邊線滾動效果

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
    <rect id="strokedrect" x="0" y="0" width="300" height="200" />
</svg>

@keyframes marchingants {
    to { stroke-dashoffset: 19; }
}
rect#strokedrect {
    stroke: hsl(260, 50%, 90%);
    fill: white;
    stroke-width: 7;
    stroke-dasharray: 10;
    animation: marchingants 1s forwards infinite linear;
}

 

參考：https://justcoding.iteye.com/blog/2226355

          https://segmentfault.com/a/1190000007309718