@@ -55,7 +55,7 @@ const getCircleStyle = (
5555 strokeDasharray : `${ perimeterWithoutGap } px ${ perimeter } ` ,
5656 strokeDashoffset : strokeDashoffset + stepSpace ,
5757 transform : `rotate(${ rotateDeg + offsetDeg + positionDeg } deg)` ,
58- transformOrigin : '50% 50% ' ,
58+ transformOrigin : '0 0 ' ,
5959 transition :
6060 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s' ,
6161 fillOpacity : 0 ,
@@ -129,8 +129,8 @@ const Circle: React.FC<ProgressProps> = ({
129129 key = { index }
130130 className = { `${ prefixCls } -circle-path` }
131131 r = { radius }
132- cx = { VIEW_BOX_SIZE / 2 }
133- cy = { VIEW_BOX_SIZE / 2 }
132+ cx = { 0 }
133+ cy = { 0 }
134134 stroke = { stroke }
135135 strokeLinecap = { strokeLinecap }
136136 strokeWidth = { strokeWidth }
@@ -181,8 +181,8 @@ const Circle: React.FC<ProgressProps> = ({
181181 key = { index }
182182 className = { `${ prefixCls } -circle-path` }
183183 r = { radius }
184- cx = { VIEW_BOX_SIZE / 2 }
185- cy = { VIEW_BOX_SIZE / 2 }
184+ cx = { 0 }
185+ cy = { 0 }
186186 stroke = { stroke }
187187 // strokeLinecap={strokeLinecap}
188188 strokeWidth = { strokeWidth }
@@ -199,7 +199,7 @@ const Circle: React.FC<ProgressProps> = ({
199199 return (
200200 < svg
201201 className = { classNames ( `${ prefixCls } -circle` , className ) }
202- viewBox = { `0 0 ${ VIEW_BOX_SIZE } ${ VIEW_BOX_SIZE } ` }
202+ viewBox = { `${ - VIEW_BOX_SIZE / 2 } ${ - VIEW_BOX_SIZE / 2 } ${ VIEW_BOX_SIZE } ${ VIEW_BOX_SIZE } ` }
203203 style = { style }
204204 id = { id }
205205 role = "presentation"
@@ -220,8 +220,8 @@ const Circle: React.FC<ProgressProps> = ({
220220 < circle
221221 className = { `${ prefixCls } -circle-trail` }
222222 r = { radius }
223- cx = { VIEW_BOX_SIZE / 2 }
224- cy = { VIEW_BOX_SIZE / 2 }
223+ cx = { 0 }
224+ cy = { 0 }
225225 stroke = { trailColor }
226226 strokeLinecap = { strokeLinecap }
227227 strokeWidth = { trailWidth || strokeWidth }
0 commit comments