css - 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/

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

Answer 1

使用dashoffset 的模拟绘图效果只对实线有效。这是因为它的工作原理是设置一个与路径长度匹配的虚线模式，然后使用 dashoffset 移动它。您不能为此使用破折号图案，因为当破折号偏移发生变化时，小破折号会移动，从而破坏效果。

如果您不介意破折号移动，那么修复示例所需要做的就是正确构建破折号模式并保持不变，同时更改破折号偏移量。

.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 的间隙。

如果您不希望破折号那样移动，那么您需要更巧妙地使用一些其他技术。例如，您可以单独保留破折号图案，而是使用 mask 或剪辑路径来显示您的路径。