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

SVG 圆起点

SVG circle starting point

javascript

css

geometry

svg

rotation