CODEWITHSUNDEEP
htmlcsssvg
Chunbin Li
Chunbin Li

Reputation: 2244

How to change start point of svg line animation

I use stroke-dasharray to create line animation when hovering it, would I have any way to change the start point?

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>

Upvotes: 2

Views: 3031

Answers (1)

Holger Will
Holger Will

Reputation: 7526

you can use stroke-dashoffset to change the starting point. with a bit of fiddeling around i came up with offset of 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>

Upvotes: 6

Related Questions