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的间隔。

如果你不想让破折号移动，那么你需要更复杂一些，并使用其他技术。例如，您将独自保留短划线模式，而是使用掩码或剪辑路径来显示您的路径。

Answer 2

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

如果“从1000行程dasharray值‘5 5’”中删除下面的代码

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

和修改，它示出了虚线半圆。 希望这可以帮助你。