SVG Circle

SVG circle

A <circle> element are used to draw a circle. if we are draw a circle we are need three components x-coordinate, y-coordinate and radius of circle. in similarly way svg used to draw a circle using this attributes (cx,cy,r).

<circle cx="x-coordinate"
        cy="y-coordinate" 
        r="radius">
</circle>

Main attributes.

Name Description
cx x-coordinate of circle there is center of the circle.
cy y-coordinate of circle.
r r is radius of circle

For example

SVG circle example
<?xml version="1.0"?>
<svg width="300" height="200" 
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="160" cy="90"  r="70" stroke="red" stroke-width="5.8" fill="none">
  </circle>
</svg>

Other attributes.

Name Description
stroke use to change the border with.
fill use to change the fill color
stroke-width use to modified border width
stroke-dasharray use to modified border shape

Example

SVG fill circle example

<?xml version="1.0"?>
<?xml version="1.0"?>
<svg width="300" height="200"  
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle stroke-dasharray="2 3" cx="160" cy="90"  r="70" stroke="#ff5722" stroke-width="5.8" fill="pink"></circle>
</svg>

SVG Circle Animation

SVG circle animation example

<?xml version="1.0"?>
<svg width="300" height="340"  version="1.1"
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle stroke-dasharray="2 3" cx="160" cy="190"  r="120" stroke="blue" stroke-width="5.8" fill="none">
   <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="5s" repeatCount="indefinite"></animate>
    <animate attributeType="XML" attributeName="stroke-dasharray" from="10" to="120"
        dur="5s" repeatCount="indefinite"></animate>
  </circle>
   <circle stroke-dasharray="2 3" cx="160" cy="190" r="120" stroke="chartreuse" stroke-width="5.8" fill="none">
  <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="6s" repeatCount="indefinite"></animate> 
     <animate attributeType="XML" attributeName="stroke-dasharray" from="10" to="120"
        dur="5s" repeatCount="indefinite"></animate>
  </circle>
  <circle stroke-dasharray="2 3" cx="160" cy="190"  r="120" stroke="salmon" stroke-width="6 " fill="none">
   <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="7s" repeatCount="indefinite"></animate>
    <animate attributeType="XML" attributeName="stroke-dasharray" from="10" to="120"
        dur="15s" repeatCount="indefinite"></animate>
  </circle>
  <circle stroke-dasharray="2 3" cx="160" cy="190" r="120" stroke="hotpink" stroke-width="7" fill="none">
  <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="120s" repeatCount="indefinite"></animate>
    
  </circle>
</svg>

Another example

SVG circle stroke-dasharray animation example
<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle stroke-dasharray="30" cx="140" cy="80" r="30" fill="none" stroke="#9C27B0" stroke-width="5">  <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 140 80"
            to="360 140 80"
            dur="8s"
            repeatCount="indefinite"></animateTransform></circle>
  
  <circle stroke-dasharray="50" cx="140" cy="80" r="50" fill="none" stroke="hotpink" stroke-width="5">  <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 140 80"
            to="0 140 80"
            dur="18s"hotpink
            repeatCount="indefinite"></animateTransform></circle>
    <circle stroke-dasharray="20" cx="140" cy="80" r="20" fill="none" stroke="sandybrown" stroke-width="5">  <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 140 80"
            to="0 140 80"
            dur="60s"
            repeatCount="indefinite"></animateTransform></circle>
  
      <circle  cx="140" cy="80" r="5" fill="none" stroke="darkgray" stroke-width="5">  </circle>
</svg>

Divide SVG Circle Into N equal parts

Some time we are need to separate a circle into N equal parts, we can divide circle into N parts by using lines. Here assume that max partition of circle are 360 and minimum is 2.


<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
  <input type="number" max="360" min="2" value="5" id="quantity" name="quantity">
  <br>
<?xml version="1.0"?>
<svg width="300" height="200" 
     xmlns="http://www.w3.org/2000/svg">
  <circle  cx="160" cy="90"  r="70" stroke="skyblue" stroke-width="5.8" fill="whitesmoke">
  </circle>
  <text x=20 y=20 id="chartFlow1"></text> 

  <g id="Container"></g>
  
       <!-- JQuery-->
    <script type="text/JavaScript">
      <![CDATA[
     regularCodes=[]   
     regularCodes.makeSVG=function (tag, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs) {
        el.setAttribute(k, attrs[k]);
    }
    return el;
}

        
     $(function(){
        divide();
     });
      function divide(){
          var size=$("#quantity").val();
        $("#Container").text("");
        if(size>360 ||size<2) return;
        var angle=360/size,
            element,
            midx=160,
            midy=90;
      
        for(var i=1; i<=size;i++){
          console.log(i);
            element=regularCodes.makeSVG("line",{
              x1:160,
              y1:90,
              x2:160,
              y2:20,
              "stroke":"gray",
              "transform":"rotate("+(angle*i)+" "+midx+" "+midy+")"
              
            });
           $("#Container").append(element);
         }
    
   
      }
    $("#quantity").on("keyup mouseup",function(){
        divide();
       });
      ]]>

    </script>
</svg>
 
  </body>
</html>


Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment







© 2021, kalkicode.com, All rights reserved