Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

SVGRect

This article needs a technical review. How you can help.

The SVGRect represents a rectangle. Rectangles consist of <code>x</code> and <code>y</code> coordinate pair identifying a minimum X value, a minimum Y value, and a width and height, which are constrained to be non-negative.

An SVGRect object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown

Properties

x

The exact effect of this coordinate depend on each element.If the attribute is not specified, the effect is as if a value of "0" were specified.

y 

The exact effect of this coordinate depend on each element.If the attribute is not specified, the effect is as if a value of "0" were specified.

Width

This represents the width of the rectangle.A value that is negative results to an error. A value of zero disables rendering of the element

Height 

This represents the height of the rectangle.A value that is negative results to an error.A value of zero disables rendering of the element.

Exceptions on setting: a DOMException with code NO_MODIFICATION_ALLOWED_ERR is Raised on an attempt to change the value of a read only attribute.

Methods

The SVGRect interface do not provide any specific methods.

Example

Here is a simple usage of rect interface. (Changing the color of the rect interface on every click)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" id="myrect" onclick="doRectClick()" />

   <text x="60" y="40" fill="white" font-size="40" onclick="doRectClick();">Click Me</text>
</svg>
   function doRectClick(){
      var myrect = document.getElementById('myrect');
      var r = Math.floor(Math.random() * 255);
      var g = Math.floor(Math.random() * 255);
      var b = Math.floor(Math.random() * 255);
      myrect.style.fill = 'rgb(' + r + ', ' + g + ' , ' + b + ')';
}


Click the rect

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<rect>' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0
1.5 (1.8)  
9.0 8.0 3.0.4
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.8) No support
(Yes)  
3.0.4

 

Document Tags and Contributors

 Contributors to this page: essymo, fscholz, kscarfone, Sheppy, Jeremie
 Last updated by: essymo,