[SVG] 製作線條的動畫效果(Line Animation)

有時候可能會看到一些網站有線條會隨著形狀慢慢跑出來的效果，這種效果我們可以使用 SVG 搭配 CSS 的動畫來幫我們達成。

首先先準備一個 SVG 的形狀，我這邊是畫一個六角形。

<svg class="logo" viewBox="0 0 112 112">
  <polygon class="hex" points="101.9,82.5 101.9,29.5 56,3 10.1,29.5 10.1,82.5 56,109 "/>
</svg>

接著設定樣式，我讓這個形狀只有線條。

.hex{
        stroke:red;
        stroke-width: 2px;
        fill: none;
}

這時我們應該可以看到這樣的形狀。

接著來認識一個屬性 SVG 特有的 CSS 屬性 stroke-dasharray，當設定完這個屬性，我們可以看到線條就變成虛線了。

.hex{
  stroke-dasharray: 20;
}

這個 stroke-dasharray 的數字越大，線條就會越長。

接著再來看一個屬性叫作 stroke-dashoffset，這個可以讓線條起始的位置不一樣，如果我們搭配 CSS 的動畫，這樣線條就會動起來了。

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}
.hex{
  stroke:red;
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 20;
  animation: dash 5s linear;
}

那如果我們要做線條慢慢跑出來，只要讓他的 stroke-dasharray 的長度比線條長，再設定 stroke-offset，這樣線條就會看不到了。

.hex{
  stroke:red;
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

最後我們再加上動畫，讓 stroke-dashoffset 變成 0，這樣線條就會長出來了。

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.hex{
  stroke:red;
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear;
}