#18-手写字特效炫起来！(SVG dasharray & dashoffset)

第3天写了打字特效炫起来！

今天来个姊妹篇，手写字特效炫起来!
已经默默进入SVG几天了...

老样子先来看成果！

底线是我用Adobe XD拉的～按下右键复制SVG code~（拉到後面有点丑 ಠ_ಠ
这个其实就是使用：dash-array & dash-offset的属性去做。

使用stroke玩玩

stroke-dasharray: 笔画的长度
stroke-dashoffset: 笔画的位置

算好dash-array 为可以包覆整个物件的长度後，
（不会算的就跟我一样手动试试长度 XD）
再调整dash-offset 移动他的位置，就会有在写字的效果罗～

不熟悉这两个属性的人可以到女神的codepen玩一下：试试看dasharray 试试看dashoffset

stroke-dashoffset也可以像我之前的范例一样，
做出网页的进度条～传送门

上部分code!

//HTML
<div class="logo">
      <svg width="600px" height="" viewBox="0 0 600 160">  
       <text 
          fill="none" 
          stroke="#fff" 
          x="0"
          y="120"
          stroke-width="5" 
          font-size="120" 
          font-family="'Raleway', sans-serif" 
          font-weight="800">
          Hi Regina
        </text>
        <path class="underline" data-name="Path 1" 
				d="M107,318.31...省略" 
				transform="translate(60 -188.421)" 
				fill="none" stroke="#00BFFF" stroke-width="3"/>
     </svg>
  </div>
</div>

//SCSS
$color: #F3F3F3;
$stroke-width: 5px;

//文字的部分
text {
   stroke-width: $stroke-width;
   stroke-dasharray: 900;
   stroke-dashoffset: -900;
   animation: text 4s forwards 1;
   animation-delay: 1s;
  }
  
  .underline{
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: underline 4s forwards 1;
    animation-delay: 5s;
  }

//文字的动态
@keyframes text {
 75% {
  fill: transparent;
  stroke-dashoffset: 0;
  stroke-width: $stroke-width;//先留着外框框
 }
 100% {
  fill: $color; //让他上色～
  stroke-dashoffset: 0;
  stroke-width: 0;//把外框框消掉，不然会变很肥
 }
}

//下底线的动态
@keyframes underline {
 75% {
  stroke-dashoffset: 0;
 }
 100% {
  stroke-dashoffset: 0;
 }
}