SVG圆起点 [英] SVG circle starting point

问题描述

如何更改svg圆的起点以使其从0点开始逐渐进行动画处理?默认的圈子svg从3点开始.

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

推荐答案

通过变换旋转圆?

#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圆起点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！