html - 如何更改 svg 线条动画的起点

Question

我使用 stroke-dasharray 制作悬停时的线条动画，请问有什么办法可以改变起点吗？

as this photo

---

/* layout */

body {
  margin: 50px;
}

.container{
  left : 50%;
}


/* main */

.svg-outer:hover {
  stroke-width: 8px;
  stroke: rgba(255, 0, 0, 1);
  animation: MaplogoConatinerStroke .25s linear 1;
}

@keyframes MaplogoConatinerStroke {
  0% {
    stroke-dasharray: 0 549.7;
  }
  100% {
    stroke-dasharray: 549.7 0;
  }
}

<div class="container">
  Hover the logo
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-outer" viewBox="0 0 166.5 186.49">
    <defs>
      <style>
        .svg-outer {
          width: 25%;
          overflow: initial!important;
        }
        
        .circle {
          fill: rgba(0, 0, 0, 0.6);
        }

      </style>
    </defs>
    <g>
      <g>
        <path class="circle" d="M166.5,83.25a83.25,83.25,0,1,0-100,81.56v19.1a2.76,2.76,0,0,0,3.25,2.5c.69.35,34.46-19.69,45.67-26.36A83.27,83.27,0,0,0,166.5,83.25Z" />
      </g>
    </g>
  </svg>
</div>

Answer 1

您可以使用 stroke-dashoffset 来更改起点。经过一些摆弄，我得出了 153 的偏移量...

/* layout */

body {
  margin: 50px;
}

.container{
  left : 50%;
}


/* main */

.svg-outer:hover {
  stroke-width: 8px;
  stroke: rgba(255, 0, 0, 1);
  animation: MaplogoConatinerStroke .25s linear 1;
  stroke-dashoffset: 153;
}

@keyframes MaplogoConatinerStroke {
  0% {
    stroke-dasharray: 0 549.7;
  }
  100% {
    stroke-dasharray: 549.7 0;
  }
}

<div class="container">
  Hover the logo
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-outer" viewBox="0 0 166.5 186.49">
    <defs>
      <style>
        .svg-outer {
          width: 25%;
          overflow: initial!important;
        }
        
        .circle {
          fill: rgba(0, 0, 0, 0.6);
        }

      </style>
    </defs>
    <g>
      <g>
        <path class="circle" d="M166.5,83.25a83.25,83.25,0,1,0-100,81.56v19.1a2.76,2.76,0,0,0,3.25,2.5c.69.35,34.46-19.69,45.67-26.36A83.27,83.27,0,0,0,166.5,83.25Z" />
      </g>
    </g>
  </svg>
</div>