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

我不是 SVG 专家，但我可以看出您有冲突 CSS class，即“#dashedExample .path”和“.path {”。您在这些 class 中应用了两个不同的 "stroke-dasharray" 值。如果您将值设置为“5 5”，它工作正常。

如果您删除以下代码

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

修改"stroke-dasharray value from 1000 to '5 5'"，显示虚线半圆。希望这对你有帮助。

Answer 2

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

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

SVG 绘制动画半圆不适用于虚线

SVG draw animated semi circle not working with dashed

css

svg

jquery-svg