用 dashoffset 控制的 SVG 圆形动画

【问题标题】：SVG circle animation controlled with dashoffset用 dashoffset 控制的 SVG 圆形动画
【发布时间】：2017-12-29 06:45:43
【问题描述】：

我正在尝试在圆形 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/

【问题讨论】：

标签： html css svg css-transitions

【解决方案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>

【讨论】：