Add stroke around whole circle and animate to rotate circle in svg - HTML CSS SVG

HTML CSS examples for SVG:Circle

  1. HOME
  2. HTML CSS
  3. SVG
  4. Circle

Description

Add stroke around whole circle and animate to rotate circle in svg

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.frag {<!--from  ww w .  ja  va  2s . com-->
   fill: green;
   stroke: #FFFFFF;
   transition: fill 0.3s ;
}
.center {
   fill: red;
   width:50%;
}
a:hover .frag {
   fill: #FFC722;
}
text {
   font-size: 5px;
   fill: #fff;
}
.mid-up-left{
   -ms-transform: rotate(-38deg);
   -webkit-transform: rotate(-38deg);
   transform: rotate(-38deg);
}
.mid-up-right{
   -ms-transform: rotate(38deg);
   -webkit-transform: rotate(38deg);
   transform: rotate(38deg);
}
.mid-down-left{
   -ms-transform: rotate(38deg);
   -webkit-transform: rotate(38deg);
   transform: rotate(38deg);
}
.mid-down-right{
   -ms-transform: rotate(-25deg);
   -webkit-transform: rotate(-25deg);
   transform: rotate(-25deg);
}


      </style> 
 </head> 
 <body> 
  <svg width="500" height="500" viewbox="-2 -2 202 203" shape-rendering="geometricPrecision"> 
   <a xlink:href="#"> 
    <path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /> 
    <text x="135" y="-60.5" text-anchor="middle" class="mid-up-right">
      Endorsements 
    </text> </a> 
   <a xlink:href="#"> 
    <path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /> 
    <text x="185" y="105" text-anchor="middle">
      personal life 
    </text> </a> 
   <a xlink:href="#"> 
    <path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /> 
    <text x="50" y="222" text-anchor="middle" class="mid-down-right">
      Place I am visited 
    </text> </a> 
   <a xlink:href="#"> 
    <path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /> 
    <text x="145" y="108" text-anchor="middle" class="mid-down-left">
      Academy 
    </text> </a> 
   <a xlink:href="#"> 
    <path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /> 
    <text x="15" y="105" text-anchor="middle">
      awards 
    </text> </a> 
   <a xlink:href="#"> 
    <path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /> 
    <text x="25" y="60.5" text-anchor="middle" class="mid-up-left">
      Career Overview 
    </text> </a> 
   <a xlink:href="#"> 
    <circle cx="100" cy="100" r="20" stroke="red" stroke-width="3" fill="red" /> </a> 
   <circle cx="100" cy="100" r="100" stroke="#000" stroke-width="2" fill="none" /> 
  </svg>  
 </body>
</html>

Related Tutorials