html - 用 dashoffset 控制的 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 fiddle :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>