SVG Rectangle

SVG Rectangle

A <rect> element are used to draw a rectangle. we are draw a rectangle using 4 components like x-coordinate,y-coordinate,width and height.

   <rect  
    x="x-coordinate"
    y="y-coordinate"
    width="width-of-rectangle"
    height="height-of-rectangle">
  </rect>

Basic example

SVG Rectangle Example
<?xml version="1.0"?>
<svg width="260" height="140" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
   <rect fill="none" stroke="blue" stroke-width="2px" x="10" y="10" width="100" height="100">
  </rect>
</svg> 

Rounded Rectangles

rx and ry attributes are used to set the rounded rectangle corners. for example.

SVG Rounded Rectangle

  <svg width="190" height="250" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <rect fill="none" stroke="blue" stroke-width="4px" x="10" y="10" width="70" height="70" rx="20"  ry="20">
  </rect>
  <rect fill="none" stroke="gray" stroke-width="4px" x="90" y="10" width="70" height="70" rx="30" ry="20">
  </rect>
  <rect fill="none" stroke="#e0617e" stroke-width="4px" x="10" y="90" width="70" height="70" rx="50"  ry="10">
  </rect>
  <rect fill="none" stroke="mediumorchid" stroke-width="4px" x="90" y="90" width="70" height="70" rx="50" ry="50">
  </rect>
  <rect fill="none" stroke="#e0617e" stroke-width="4px" x="10" y="170" width="70" height="70" rx="25" ry="70">
  </rect>
  <rect fill="none" stroke="mediumorchid" stroke-width="4px" x="90" y="170" width="70" height="70" rx="10"  ry="50">
  </rect>
</svg> 

Rotated example

SVG Rectangle Rotation
<?xml version="1.0" standalone="no"?>
<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <rect transform="rotate(45 140 15)" x="140" y="3" width="100" height="100" fill="none" stroke="blue" stroke-width="2">
     </rect>
</svg>

SVG Rectangle Animation

We are possible to animate SVG rectangle in various way. here given of few examples.

Example 1Using Ajax.

SVG rect move

Click to rectangle it will run

<p id="animateRect"><b>Click to rectangle it will run</b></p>
 <svg width="220" height="100">
   <g>
    <rect id="moveRect" fill="#00bcd4" x="10" y="10" width="50" height="50">
    </rect>
  </g>
  <script type="text/JavaScript">
    <![CDATA[

    function moveNode(counter){
      if(counter==150) return;
      else{
       setTimeout(function(){
              counter++;//increment counter value
               $("#moveRect").attr("x",counter);
               moveNode(counter);
           },10);//10 speed 
     }
   }
   $("#moveRect").click(function(){    
    moveNode(10);
  });
   ]]>
 </script>
</svg>

Example 2

SVG rotate rectangle
<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <rect transform="rotate(45 140 15)" x="140" y="17" width="50" height="50" fill="none" stroke="blue" stroke-width="2">
     
   <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 140 80"
            to="360 140 80"
            dur="8s"
            repeatCount="indefinite"></animateTransform></rect>
</svg>

Example 3

rectangle animate
<svg width="280" height="320" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <rect fill="#00bcd4" x="10" y="10" width="50" height="50">
    <animate attributeType="XML" attributeName="x" from="10" to="200" dur="10s" repeatCount="indefinite"></animate>
  </rect>
  <rect fill="#9c27b0" x="200" y="10" width="50" height="50">
    <animate attributeType="XML" attributeName="x" from="200" to="10" dur="10s" repeatCount="indefinite"></animate>
  </rect>
  <rect fill="#e91e63" x="10" y="200" width="50" height="50">
    <animate attributeType="XML" attributeName="x" from="10" to="200" dur="10s" repeatCount="indefinite"></animate>
       <animate attributeType="XML" attributeName="y" from="200" to="10" dur="10s" repeatCount="indefinite"></animate>
  </rect>
  <rect fill="#3f51b5" x="200" y="200" width="50" height="50">
    <animate attributeType="XML" attributeName="x" from="200" to="10" dur="10s" repeatCount="indefinite"></animate>
     <animate attributeType="XML" attributeName="y" from="200" to="10" dur="10s" repeatCount="indefinite"></animate>
  </rect>
</svg>

4) rotate rectangle in one fixed point.

SVG rectangle
<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g>
  <rect stroke-dasharray="2" x="140" y="80" width="50" height="50" fill="none" stroke="green" stroke-width="2"></rect>
      <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 140 80"
            to="360 140 80"
            dur="8s"
            repeatCount="indefinite"></animateTransform>
  </g>
  <circle cx="140" cy="80" r="30" fill="none" stroke="green"></circle>
</svg>


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