如何更改svg线动画的起点

Question

我在悬停时使用stroke-dasharray创建线条动画，我有办法改变起点吗？

as this photo

＆＃13;

＆＃13;

/* 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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用stroke-dashoffset来更改起点。我带着一点点摆弄，想出了153的偏移......

pymysql.err.ProgrammingError: (1064, u"You have an error in your SQL syntax; 
check the manual that corresponds to your MariaDB server version for the 
right syntax to use near '\\G' at line 1")

/* 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;
  }
}