SVG circle starting point

问题

How can I change the starting point of a svg circle for animate it progressively begining at 0 o'clock? the default circle svg begin at 3 o'clock.

My current circle ( hover for animation):

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

回答1:

Rotate the circle with a transformation?

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

Edit: Updated with CSS

来源：https://stackoverflow.com/questions/29068088/svg-circle-starting-point

标签

javascript

css

svg

rotation

geometry