SVGRectElement
The SVGRectElement
interface provides access to the properties of <rect>
elements, as well as methods to manipulate them.
Instance 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.
Instance methods
This interface doesn't implement any specific methods, but inherits methods from its parent, SVGGeometryElement
.
Examples
Changing the color of an SVG rectangle
This example sets the fill color of an SVGRectElement
to a random value whenever the user clicks it.
HTML
html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect
width="300"
height="100"
id="myrect"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
<text x="60" y="40" fill="white" font-size="40">Click Me</text>
</svg>
JavaScript
js
const myRect = document.querySelector("#myrect");
myRect.addEventListener("click", () => {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
myRect.style.fill = `rgb(${r}, ${g}, ${b})`;
});
Result
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # InterfaceSVGRectElement |
Browser compatibility
BCD tables only load in the browser