Rectangles

Tag description:

The image below demonstrates the <rect/> tag for drawing rectangles. These rectangles have horizontal and vertical sides. The attributes which determine the shape of the rectangle are given in the table at the bottom of the page.

image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.

Source code:

Source of rect.svg:Hide line numbers 
1: <svg version="1.1" baseProfile="full"
2:      xmlns="http://www.w3.org/2000/svg" 
3:      width="300px" height="200px" viewBox="0 0 300 200">
4:      
5: <rect x="10" y="10" width="280" height="100" fill="green" stroke="black" stroke-width="5px"/>
6: 
7: </svg>

Geometric Attributes of the <rect/> tag:

x The smallest x-coordinate of a point in the rectangle.
y The smallest y-coordinate of a point in the rectangle.
width The difference between the largest x-coordinate of a point in the rectangle and the smallest x-coordinate.
height The difference between the largest y-coordinate of a point in the rectangle and the smallest y-coordinate.

References:

This presentation is part of a SVG Tutorial for Mathematics Students.

© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Creative Commons License Valid XHTML 1.0 Strict Valid CSS!