CODEWITHSUNDEEP
htmlcsssvgsvg-animate
Ram
Ram

Reputation: 393

Svg Circle rotation about its center without css

I tried to rotate a svg circle without using css and my code is:

<g id="center_circle" transform="translate(-58.909212,391.47247)">
    <path style="opacity:1;fill:transparent;fill-opacity:1;fill-rule:nonzero;stroke:#295495;stroke-width:12;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1500;stroke-dashoffset:1500;stroke-opacity:1" d="m 466.0714,332.36218 a 91.428581,91.428581 0 0 1 -91.16568,91.42821 91.428581,91.428581 0 0 1 -91.68997,-90.90242 91.428581,91.428581 0 0 1 90.63839,-91.95097 91.428581,91.428581 0 0 1 92.21122,90.37362" id="path5403">
    <animate id="center_circle_border_anim" attributeName="stroke-dashoffset" from="1500" to="0" begin="0.5s" dur="2s" fill="freeze" repeatCount="1"></animate>
    <animate id="center_circle_anim" attributeName="fill" from="transparent" to="#fff" begin="center_circle_border_anim.end" dur="0.5s" fill="freeze" repeatCount="1"></animate>
    </path>
</g>

My problem is to make the circle dashoffset to start from the top and also the circle should rotate after the dashoffset gets completed.

Upvotes: 1

Views: 1033

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14585

I optimized your SVG code a little using - svg-editor Peter Collingridge 

d="m466.1 332.4a91.4 91.4 0 0 1-91.2 91.4 91.4 91.4 0 0 1-91.7-90.9 91.4 91.4 0 0 1 90.6-92 91.4 91.4 0 0 1 92.2 90.4"/>

For the correct animation of the stroke-dashoffset, you must accurately calculate the length of the path.

To do this, use getTotalLength () 

<script>
         function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Length of the path - " + len);
        };
  </script>

Below is the code for calculating the path length 

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
  <input  type="button" value="Total path"  onclick="TotalLength()"/>
   
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	width="200" height="200" viewBox="130 -550 400 400" >
 
 <g id="center_circle" transform=" rotate(-90)" >
         <path id="check" fill= "none" stroke ="#295495" stroke-width ="1" 
         d="m466.1 332.4a91.4 91.4 0 0 1-91.2 91.4 91.4 91.4 0 0 1-91.7-90.9 91.4 91.4 0 0 1 90.6-92 91.4 91.4 0 0 1 92.2 90.4"/>
  </g>
		 </svg> 
   <script>
         function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Length of the path - " + len);
        };
  </script>

Click the "Total path" button and get the full length of your path.
The calculated value of 574px is added in thestroke-dashoffset and stroke-dasharray

Animation of line drawing always starts from the starting point of the path, but it is on the positive part of the "X"

To start drawing a line from the top, you either have to change the path so that the starting point of the path is at the top, or simply turn all the way to -90 degrees - transform=" rotate(-90)"

Below is the animation code using stroke-dashoffset 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="130 -480 400 400" >
<g id="center_circle" transform=" rotate(-90)" >
    <path style="stroke-linecap:round;stroke:#295495;stroke-width:12;stroke-dasharray:574;stroke-dashoffset:574;" 
	 d="m466.1 332.4a91.4 91.4 0 0 1-91.2 91.4 91.4 91.4 0 0 1-91.7-90.9 91.4 91.4 0 0 1 90.6-92 91.4 91.4 0 0 1 92.2 90.4">
	
     <animate id="center_circle_border_anim" attributeName="stroke-dashoffset" from="574" to="0" begin="0.5s" dur="3s" fill="freeze" repeatCount="1"></animate>
    <animate id="center_circle_anim" attributeName="fill" from="transparent" to="#fff" begin="center_circle_border_anim.end" dur="0.5s" fill="freeze" repeatCount="1"></animate>
    </path> 
</g>  
</svg>

An example of growing and decreasing animation is dasharray

Animations go consistently one after another:

  • After the first animation, the second begins with the command -begin = "dash_grow.end"- changes the transparency of the circle.
  • The third animation - the reduction of the line begins with the command begin =" dash_opacity.end "
  • Loops animation, that is, the transition to the first animation after the end of the last animation occurs at the command - begin =" 0.5s; dash_ungrow.end + 1s " 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="130 -500 400 400" >
 <defs>
      <pattern id="newpattern"
             x="0" y="0" width="20" height="20"
             patternUnits="userSpaceOnUse" >
               
            <g fill="#85D2FF"  fill-opacity="0.7">
             <rect x="0" y="0" width="10" height="10" />
             <rect x="10" y="10" width="10" height="10" />
            </g>
      </pattern>
              
  </defs> 
	<g id="center_circle" transform=" rotate(-90)" >
    <path style="stroke-linecap:round;stroke:#295495;stroke-width:12;stroke-dasharray:574;stroke-dashoffset:574; fill:	mediumseagreen;   " 
	 d="m466.1 332.4a91.4 91.4 0 0 1-91.2 91.4 91.4 91.4 0 0 1-91.7-90.9 91.4 91.4 0 0 1 90.6-92 91.4 91.4 0 0 1 92.2 90.4">
	
     <animate id="dash_grow" attributeName="stroke-dashoffset" from="574" to="0" begin="0.5s;dash_ungrow.end+1s" dur="3s" fill="freeze" repeatCount="1"></animate>
   
   <animate id="dash_opacity" attributeName="opacity" values="1;0.2;1" fill="freeze;" begin="dash_grow.end" dur="4.5s"  repeatCount="1"></animate> 

   <animate id="dash_ungrow" attributeName="stroke-dashoffset" from="0" to="574" begin="dash_opacity.end" dur="3s" fill="freeze" repeatCount="1"></animate>
    </path> 
</g>  
</svg>

Upvotes: 4

Related Questions