2016-02-12 241 views
2

我試圖動畫繪製SVGSVG繪製動畫的半圓不虛

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

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

回答

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

如果你不想讓破折號移動,那麼你需要更復雜一些,並使用其他技術。例如,您將獨自保留短劃線模式,而是使用掩碼或剪輯路徑來顯示您的路徑。

+0

謝謝你的例子看起來不錯,所以我會試試這個,並使用js循環來創建dasharray。 – user828941

0

我不是SVG的專家,但我可以看到你有衝突的CSS類,即「#dashedExample .path」和「.path {」。 您已經在這些課程中應用了兩個不同的「stroke-dasharray」值。如果您將值設置爲「5 5」,則可以正常工作。

如果「從1000行程dasharray值‘5 5’」中刪除下面的代碼

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

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

+0

這是行不通的。 https://jsfiddle.net/60drrzdk/2/ – ketan

+0

我可以看到它正在動畫,但它是破滅。你只想要虛幻的半圓形而沒有動畫? 如果你不想在css下刪除動畫,也可以使用 @keyframes破折號{ from { stroke-dashoffset:1000; } 至{ stroke-dashoffset:0; } } –