SVG 动画虚线边框路径，如进度条

Question

我正在尝试为一个像进度条一样的虚线 SVG 圆圈设置动画 - 以在 3 秒内填充自身，但很难用虚线边框实现这种效果。这是我目前拥有的代码，它具有动画效果，但不像进度：

svg circle {
  animation: dash 3s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <circle stroke="#000000" pathLength="215" stroke-width="7" fill="transparent" stroke-dasharray="6 6" r="57" cx="60" cy="60"/>
    </svg>

https://codepen.io/xtnciwuu-the-selector/pen/abLXOJO

如有任何帮助，我们将不胜感激

Answer 1

这里有两个不同的例子。第一个有点“hacky”，因为我用所有点对 dasharray 进行了硬编码，spaces 然后是随后的长 space.

第二个例子使用了掩码。动画 circle/dasharray 被遮盖了，所以它看起来像更小的破折号。

它给了你同一个动画的两种不同的表达方式。

svg circle#c1 {
  animation: dash1 3s linear forwards;
}

@keyframes dash1 {
  from {
    stroke-dashoffset: 36;
  }
  to {
    stroke-dashoffset: 0;
  }
}

svg circle#c2 {
  animation: dash2 3s linear forwards;
}

@keyframes dash2 {
  from {
    stroke-dasharray: 0 36;
  }
  to {
    stroke-dasharray: 36 36;
  }
}

<svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle id="c1" stroke="#000000" pathLength="36" stroke-width="7" fill="transparent"
  stroke-dasharray="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 36"
  r="57" cx="60" cy="60" transform="rotate(-90 60 60)" />
</svg>

<svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="m1">
      <circle stroke="white" pathLength="36" stroke-width="7" fill="transparent"
      stroke-dasharray="1 1" r="57" cx="60" cy="60" />
    </mask>
  </defs>
  <circle id="c2" mask="url(#m1)" stroke="#000000" pathLength="36" stroke-width="7"
  fill="transparent" stroke-dasharray="18 36" r="57" cx="60" cy="60"
  transform="rotate(-90 60 60)" />
</svg>

SVG 动画虚线边框路径，如进度条

SVG animating dotted border path like progressbar

javascript

css

jquery

animation

svg