svg描边动画

svg路径动画步骤

1.用getTotalLength()方法获取path的路径总长度
2.设置stroke每段虚线的间距和偏移量为总长度，
3.使用动画将偏移量设置为初始值0
stroke-dasharray：每段虚线的偏移距离
stroke-dashoffset：偏移量

HTML

<div class="icon-box">
      <svg t="1642748502659" class="icon" viewBox="0 0 1498 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2199" width="200" height="200"><path d="M160.938086 526.799053 90.530611 714.26775l-90.054725 0 71.227187-185.014784-13.919642-115.42999 90.874428 0L160.938086 526.799053zM323.034522 313.131725l199.756731 0-74.495693 401.136026L330.40162 714.26775l66.314035-63.037747 44.207616-293.892506L296.839861 357.337498l-13.919642 20.466074 12.28019 0L283.739955 397.450035l120.34279 0-9.821082 45.845094L334.495017 443.29513l-8.186778 49.11872 67.953454 0-12.280218 44.205773L317.306844 536.619622l-20.466995 106.423808 17.188172 0 15.558963-82.679091 45.027363 0-12.280218 85.957734L304.20695 688.069018 150.29217 688.069018 172.398592 558.725222l49.120759 0-14.734131 84.318413 13.914478 0 18.832691-106.423808-68.773156 0 7.372186-44.205773 69.587742 0 7.367066-43.386163L243.625677 466.220339 177.311657 466.220339l33.566925-55.670886L177.311657 410.549453l13.914522-22.100378-89.235023 0-26.194637-105.609318 94.962708 0 22.106419 102.330573L255.086182 280.385946l86.781031 0L323.034522 313.131725zM628.404941 500.60032 523.610963 500.60032 671.792947 280.385946l101.515212 0L628.404941 500.60032zM900.203418 533.346202 833.07479 284.479078l104.788906 0 65.494323 248.867021L900.20345 533.346099 900.203418 533.346202zM876.462797 540.71296l51.574784 171.915469-81.048229 0-11.460506-33.560371-26.199757 33.560371-282.444365 0 7.372186-45.025485 194.023936-242.314854L832.255113 425.28809 648.871936 665.14903l182.563442 0-34.386534-124.43607L876.462773 540.71296 876.462797 540.71296zM1039.378944 643.863245l30.293197-170.276147-30.293182 0 99.88096-191.561933 94.148122 0-90.054758 167.822234 21.286686 0-34.386534 194.015744L1039.378935 643.863142 1039.378944 643.863245zM1382.404506 453.121024l-4.908032 22.919987 98.241536 0.819712-3.278848 48.299008-105.608609 0-36.020838 189.927629-376.592487 0-9.00649-46.664806 302.091646 0 25.380045-143.262822-69.587742 0 7.367066-49.11872 72.04685 0 8.186778-46.659686 85.141606-88.416768L1225.221187 340.964557 1239.955354 292.665549l257.064283 0-6.547354 42.571571L1382.404506 453.121024zM1382.404506 453.121024" p-id="2200"></path></svg>
</div>

js

let logo = document.querySelectorAll('.icon path')
    // getTotalLength()反回用户代理对路径总长度
    console.log(logo[0].getTotalLength())

css

.icon-box{
    width: 500px;
    height: 600px;
    background-color: pink;
    .icon {
      fill: yellowgreen; //填充的颜色
      
    }
    path{
      stroke-width: 10; //线宽
      stroke: #000; //线色
      stroke-dasharray: 11229; //每段虚线的间距
      stroke-dashoffset: 11229; //偏移量
      
    }
    
  }
  .icon-box:hover path{
    animation: identifier 3s ease forwards 600ms;
  }

@keyframes identifier {
  to{
    stroke-dashoffset: 0;
  }
}

文字描边动画，纯css版

html

<svg id="text-box" width="300px" height="200px">
      <text x="5%" y="55%">LVAL</text>
</svg>

css

#text-box {
    background-color: #ccc;
    text {
      font-size: 36px;
      font-weight: 900;
      stroke-width: 2px;
      stroke: aqua;
      fill: transparent;
      letter-spacing: 6px;
      stroke-dasharray: 100%;
      stroke-dashoffset: 100%;
      animation: identifier 3s ease forwards 600ms;
    }
  }
@keyframes identifier {
  to {
    stroke-dashoffset: 0;
  }
}

效果