SVG绘制动画半圆不随虚线工作

Question

我正在尝试使用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;
}

这里有一个jsfiddle的例子，我只需要顶部动画，但是需要虚线而不是实线。 https://jsfiddle.net/60drrzdk/1/ 希望有人能指点我正确的方向。

- user828941

Answer 1

使用dashoffset模拟绘图效果只对实线有效。这是因为它通过设置与路径长度匹配的虚线模式，然后使用dashoffset进行移动来工作。不能使用虚线模式，因为当dashoffset更改时，小破折号将移动，破坏效果。

如果你不介意破折号的移动，那么你只需要正确构造虚线模式并保持不变，同时更改dash offset即可修复你的示例。

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

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

circle {
  stroke-width: 2;
  stroke-opacity: 1;
  stroke-dasharray: 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 5 5 5 5 5 5 5 5 5 5 5 5 5 5
                    5 5 5 5 5 5 0 630;
  stroke: #E0236C;
  fill: none;
}

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

圆的周长为628.3。因此，我们需要制作一个由“5,5”对组成的破折号模式，以形成近似630的长度，然后是630个间隔。

如果您不想让虚线移动，那么您需要更加巧妙地使用其他技术。例如，您可以保持虚线模式不变，而改用蒙版或剪切路径来显示您的路径。

- Paul LeBeau

---

谢谢，你的示例看起来不错，所以我会尝试使用js循环来创建dasharray。 - user828941

Answer 2

我不是SVG方面的专家，但我可以看到你有冲突的CSS类，即“＃dashedExample .path”和“.path {”。 在这些类中应用了两个不同的“stroke-dasharray”值。如果将值设置为“5 5”，则可以正常工作。

如果您删除以下代码

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

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

希望这能帮到您。

- Nitin Garg

---

我能看到它正在被动画化，但是它是虚线的。你只想要虚线的半圆而没有动画吗？如果你不想要动画，那么请移除下面的CSS代码：@keyframes dash { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } - Nitin Garg