SVGRectElement

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

Properties

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.

Methods

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

Example

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

SVG content

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" id="myrect" onclick="doRectClick()"
      style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
  <text x="60" y="40" fill="white" font-size="40"
      onclick="doRectClick();">Click Me</text>
</svg>

JavaScript content

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

Browser compatibility

See also

• <rect>