Baseline Widely available
The SVGRectElement interface provides access to the properties of <rect> elements, as well as methods to manipulate them.
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.
This interface doesn't implement any specific methods, but inherits methods from its parent, SVGGeometryElement.
This example sets the fill color of an SVGRectElement to a random value whenever the user clicks it.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" id="myrect" />
<text x="60" y="40" fill="white" font-size="40">Click Me</text>
</svg>
#myrect {
fill: blue;
stroke-width: 1;
stroke: black;
}
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})`;
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4