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个缺口。

如果您不希望破折号像那样移动，那么您需要更加棘手并使用其他技术。例如，您将单独留下虚线图案，而是使用蒙版或剪辑路径来显示您的路径。

Answer 2

我不是SVG的专家，但我可以看到你有一个冲突的CSS类，即＆＃34; #dashedExample .path＆＃34;和＆＃34; .path {＆＃34;。你已经应用了两个不同的值＆＃34; stroke-dasharray＆＃34;在这些课堂上。如果将值设置为＆＃34; 5 5＆＃34;它工作正常。

如果您删除以下代码

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

并修改＆＃34; stroke-dasharray值从1000到＆＃39; 5＆＃39;＆＃34;，它显示虚线半圆。希望这对你有所帮助。

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

2 个答案: