Question

我试图在圈子svg上进行悬停转换（不是完整的360度，只有大约80％）。

根据我的理解，下面的代码应该这样做，但是出于某种原因，它不是仅仅指向零，而是增加了额外的迷你拱形。如何避免？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

用dashoffset控制的SVG圆圈动画

1 个答案: