SVG循环起点

Question

如何更改svg圈的起点，以便在0 o＆＃39;时钟开始逐步制作动画？默认圈svg从3点开始。

我当前的圈子（悬停动画）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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更新