SVG Rectangle
An SVG (Scalable Vector Graphics) rectangle is a basic shape element that can be used to draw a rectangle on an SVG canvas. It is defined by the <rect> element and can have attributes such as x (the x-coordinate of the top-left corner), y (the y-coordinate of the top-left corner), width (the width of the rectangle), height (the height of the rectangle), fill (the color to fill the rectangle), and stroke (the color to stroke the 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

<?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 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

<?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.

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 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

<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 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