W3cubDocs

/DOM

SVGRect

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

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

Properties

This interface also inherits properties from its parent, SVGGeometryElement.

SVGRect.x Read only
The exact effect of this coordinate depends on each element. If the attribute is not specified, the effect is as if a value of 0 were specified.
SVGRect.y Read only
The exact effect of this coordinate depends on each element.If the attribute is not specified, the effect is as if a value of 0 were specified.
SVGRect.width Read only
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
SVGRect.height Read only
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 the code NO_MODIFICATION_ALLOWED_ERR is raised on an attempt to change the value of a read-only attribute.

Methods

This interface also inherits properties 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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes 1.5 9 8 3.1
height 1 ? ? ? ? ?
width 1 ? ? ? ? ?
x 1 ? ? ? ? ?
y 1 ? ? ? ? ?
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 1 18 Yes 4 8 3.1 ?
height 1 18 ? ? ? ? ?
width 1 18 ? ? ? ? ?
x 1 18 ? ? ? ? ?
y 1 18 ? ? ? ? ?

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGRect