我試圖動畫繪製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/
我希望有人能指出我正確的方向。
謝謝你的例子看起來不錯,所以我會試試這個,並使用js循環來創建dasharray。 – user828941