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

【问题标题】：SVG animating dotted border path like progressbarSVG动画虚线边框路径，如进度条
【发布时间】：2022-01-14 19:41:44
【问题描述】：

我正在尝试像进度条一样为虚线 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

任何帮助将不胜感激

【问题讨论】：

您可以尝试使用本指南here。 \ \Demo
是的，我试过了，但没有一个是点缀的，无法弄清楚如何实现我需要的点/破折号设计
所以圆开始时完全不可见，然后出现超过 3 秒的点，直到圆满？

标签： javascript jquery css animation svg

【解决方案1】：

这里有两个不同的例子。第一个有点“hacky”，因为我用所有的点、空格和随后的长空格对 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>

【讨论】：