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 thex
attribute of the given<rect>
element. SVGRectElement.y
Read only-
Returns an
SVGAnimatedLength
corresponding to they
attribute of the given<rect>
element. SVGRectElement.width
Read only-
Returns an
SVGAnimatedLength
corresponding to thewidth
attribute of the given<rect>
element. SVGRectElement.height
Read only-
Returns an
SVGAnimatedLength
corresponding to theheight
attribute of the given<rect>
element. SVGRectElement.rx
Read only-
Returns an
SVGAnimatedLength
corresponding to therx
attribute of the given<rect>
element. SVGRectElement.ry
Read only-
Returns an
SVGAnimatedLength
corresponding to thery
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
Specification |
---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGRectElement |
Browser compatibility
BCD tables only load in the browser