I'm trying to get an on hover transition on circle svg (not a full 360deg, just about 80%).
From my understanding, the below code should do, however for some reason, instead of just going to point zero, it adds additional mini arch. How to avoid that?
.outer {
fill: transparent;
stroke: #333;
stroke-width: 3;
stroke-dasharray: 204;
stroke-dashoffset: 1;
transition: stroke-dashoffset 0.8s;
}
svg:hover .outer {
stroke-dashoffset: 204 !important;
}<svg width="90" height="90">
<circle class="outer" cx="43" cy="43" r="40"/>
</svg>JS fiddle: https://jsfiddle.net/6vj81fmL/1/