如何更改 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"/>
通过变换旋转圆？
#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 更新
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
