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; 
} 

和修改，它示出了虛線半圓。 希望這可以幫助你。