SVGRectElement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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
<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
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