使用破折号偏移控制的 SVG 圆圈动画

Question

>我正在尝试在圆形svg上进行悬停过渡(不是完整的360度，只有大约80%(。

根据我的理解，下面的代码应该可以，但是出于某种原因，它不仅仅是零点，而是增加了额外的迷你拱门。如何避免这种情况？

.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小提琴：https://jsfiddle.net/6vj81fmL/1/

Answer 1

那是因为你的初始stroke-dasharray太短，无法覆盖圆的整个圆周。

周长似乎很252因此给它一个50的初始偏移量(约 20%(，然后过渡到等于stroke-dasharray的偏移量。

.outer {
fill: transparent;
stroke: #333;
stroke-width: 3;
stroke-dasharray: 252;
stroke-dashoffset: 50;
transition: stroke-dashoffset 0.8s;
}
svg:hover .outer {
stroke-dashoffset: 252 !important;
}

<svg width="90" height="90">
<circle class="outer" cx="43" cy="43" r="40"/>
</svg>