Css SVG绘制动画半圆不使用虚线

我正在尝试用svg制作一个虚线半圆的动画

<svg id="processArrowPath" xmlns="http://www.w3.org/2000/svg" height="220">
  <circle class="path" cy="110" cx="110" r="100"></circle>
</svg>

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

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

circle {
  stroke-width: 2;
  stroke-opacity: 1;
  stroke-dasharray: 5,5;
  stroke: #E0236C;
  fill: none;
}

.路径{
笔划阵列：1000；
行程偏移量：1000；
动画：向前冲5秒；
}
@关键帧破折号{
到{
笔划偏移：0；
}
}
圈{
笔画宽度：2；
笔画不透明度：1；
笔划数组：5,5；
行程：#E0236C；
填充：无；
}

下面是一个关于JSFIDLE的示例 所有我需要的是顶部动画，但虚线而不是实体。

---

我希望有人能给我指出正确的方向。

我不是SVG方面的专家，但我可以看到您的CSS类存在冲突，即“#dashedExample.path”和“.path{”。 您在这些类中应用了两个不同的“stroke dasharray”值。如果您将该值设置为“5 5”，则效果良好

如果你删除下面的代码

#dashedExample .path {
 stroke-dasharray: 5 5;
}

并将“stroke dasharray值从1000修改为'5 5'，显示虚线半圆。

---

希望这能对您有所帮助。

使用dashoffset的模拟绘图效果只适用于实线。这是因为它通过设置与路径长度匹配的短划线图案，然后使用dashoffset移动路径来工作。您不能使用短划线图案，因为当短划线偏移改变时，小划线会移动，从而导致损坏效果

如果您不介意虚线移动，那么在更改虚线偏移时，修复示例所需做的就是正确构建虚线图案并将其保留

.path{
行程偏移：628.3；
动画：向前冲5秒；
}
@关键帧破折号{
到{
笔划偏移：0；
}
}
圈{
笔画宽度：2；
笔画不透明度：1；
笔划dasharray:55555555555555
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 0 630;
行程：#E0236C；
填充：无；
}

我可以看到它正在被设置动画，但它是虚线。您只想要虚线半圆而不想要动画吗？如果您不想在css下面删除动画，请同时删除@keyframes dash{从{stroke dashoffset:1000；}到{stroke dashoffset:0；}谢谢您，您的示例看起来不错，所以我将尝试使用js循环来创建dasharray。