SVG循環起點

Question

如何更改svg圓圈的起點，以便在0點開始逐步制作動畫？ 默認圓圈svg從3點開始。

我當前的圈子（懸停動畫）：

 #timeline{ position:fixed; width:500px; height:500px; top:50%; left:50%; margin-top:-250px; margin-left:-250px; overflow:hidden; pointer-events: all; z-index:99999; } #bluecircle{ stroke-dasharray:1510; stroke-dashoffset:1510; -webkit-transition:all 1s ease; transition:all 1s ease; } #bluecircle:hover{ stroke-dashoffset:0; } 

 <div id="timeline"> <svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500"> <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/> <circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/> 

Answer 1

用轉換旋轉圓圈？

 #timeline{ position:fixed; width:500px; height:500px; top:50%; left:50%; margin-top:-250px; margin-left:-250px; overflow:hidden; pointer-events: all; z-index:99999; } #bluecircle{ stroke-dasharray:1510; stroke-dashoffset:1510; -webkit-transition:all 1s ease; transition:all 1s ease; } #bluecircle:hover{ stroke-dashoffset:0; } 

 <div id="timeline"> <svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500"> <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/> <circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/> </svg> 

編輯：使用CSS更新