CODEWITHSUNDEEP
htmlcsssvg
surya kumara
surya kumara

Reputation: 195

How to implement animation on stroke-dasharray and stroke-offset circle svg?

I try to make piechart using stroke line, however isn't work. The idea is piechart will be animate from 0 to 50 line.

#circle{
  stroke-dasharray: 50 100;
  stroke-dashoffset: 0;
  fill: none;
  stroke: black;
  stroke-width: 5px;
  transition: 0.3s;
  animation: progress 5s linear forwards;
  @keyframes progress  {
    from {
        stroke-dasharray: 0 100;
        stroke-dashoffset: 0;
    }
    to {
        stroke-dasharray: 50 100;
        stroke-dashoffset: 50;
    }
  }
}
<svg >
 <circle cx='24' cy='24' r='18' id="circle"/>
</svg>

Upvotes: 0

Views: 3325

Answers (1)

chrwahl
chrwahl

Reputation: 13153

The keyframes at-rule is not part of the CSS selector for the element. As default the path of the circle starts at 3 o'clock. The total length of the circle path can be controlled using the attribute pathLength. If the animation should go clockwise I think is is easier to control the starting point by setting the transform/rotate attribute on the circle instead of using the dasharray offset.

#circle {
  stroke-dasharray: 0 100;
  fill: none;
  stroke: black;
  stroke-width: 5px;
  animation: progress 5s linear forwards;
}

@keyframes progress {
  from {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: 100 100;
  }
}
<svg>
 <circle cx='24' cy='24' r='18' id="circle"
   pathLength="100" transform="rotate(-90 24 24)"/>
</svg>

Upvotes: 3

Related Questions