SVGRectElement

The SVGRectElement interface provides access to the properties of <rect> elements, as well as methods to manipulate them.

This interface also inherits properties from its parent, SVGGeometryElement.

SVGRectElement.x Read only

Returns an SVGAnimatedLength corresponding to the x attribute of the given <rect> element.

SVGRectElement.y Read only

Returns an SVGAnimatedLength corresponding to the y attribute of the given <rect> element.

SVGRectElement.width Read only

Returns an SVGAnimatedLength corresponding to the width attribute of the given <rect> element.

SVGRectElement.height Read only

Returns an SVGAnimatedLength corresponding to the height attribute of the given <rect> element.

SVGRectElement.rx Read only

Returns an SVGAnimatedLength corresponding to the rx attribute of the given <rect> element.

SVGRectElement.ry Read only

Returns an SVGAnimatedLength corresponding to the ry attribute of the given <rect> element.

This interface doesn't implement any specific methods, but inherits methods from its parent, SVGGeometryElement.

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

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.

• <rect>