New pages: SVGRectElement reflective props

files/en-us/web/api/svgrectelement/height/index.md

@@ -0,0 +1,38 @@
+---
+title: "SVGRectElement: height property"
+short-title: height
+slug: Web/API/SVGRectElement/height
+page-type: web-api-instance-property
+browser-compat: api.SVGRectElement.height
+---
+
+{{APIRef("SVG")}}
+
+The **`height`** read-only property of the {{domxref("SVGRectElement")}} interface describes the vertical size of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The length is in user coordinate system units along the y-axis. Its syntax is the same as that for [`<length>`](/en-US/docs/Web/SVG/Content_type#length).
+
+It reflects the {{SVGElement("rect")}} element's {{SVGAttr("height")}} presentational attribute. The CSS {{cssxref("height")}} property takes precedence over the SVG `height` presentational attribute, so the value may not reflect the elements actual size. The default value is `0`.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const rectangle = document.querySelector("rect");
+const rectHeight = rectangle.height;
+console.dir(rectHeight.baseVal.value); // the `height` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMXref("DOMRect.height")}}
+- {{domxref("SVGRectElement.width")}}

files/en-us/web/api/svgrectelement/rx/index.md

@@ -0,0 +1,50 @@
+---
+title: "SVGRectElement: rx property"
+short-title: rx
+slug: Web/API/SVGRectElement/rx
+page-type: web-api-instance-property
+browser-compat: api.SVGRectElement.rx
+---
+
+{{APIRef("SVG")}}
+
+The **`rx`** read-only property of the {{domxref("SVGRectElement")}} interface describes the horizontal curve of the corners of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The length is in user coordinate system units along the x-axis. Its syntax is the same as that for [`<length>`](/en-US/docs/Web/SVG/Content_type#length).
+
+It reflects the {{SVGElement("rect")}} element's {{SVGAttr("rx")}} presentational attribute. The CSS {{cssxref("rx")}} property takes precedence over the SVG `rx` presentational attribute, so the value may not reflect the actual size of the rounded corners. The default value is `0`, which draws a rectangle with square corners.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="60" height="60" rx="15" ry="15" />
+  <rect x="60" y="0" width="60" height="60" rx="15%" ry="15" />
+</svg>
+```
+
+We can access the computed values of the `rx` attributes:
+
+```js
+const rectangles = document.querySelectorAll("rect");
+const rxSize0 = rectangle[0].rx;
+const rxSize1 = rectangle[1].rx;
+console.dir(rxSize0.baseVal.value); // output: 15 (the value of `rx`)
+console.dir(rxSize1.baseVal.value); // output: 45 (15% of 300)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGRectElement.ry")}}

files/en-us/web/api/svgrectelement/ry/index.md

@@ -0,0 +1,50 @@
+---
+title: "SVGRectElement: ry property"
+short-title: ry
+slug: Web/API/SVGRectElement/ry
+page-type: web-api-instance-property
+browser-compat: api.SVGRectElement.ry
+---
+
+{{APIRef("SVG")}}
+
+The **`ry`** read-only property of the {{domxref("SVGRectElement")}} interface describes the vertical curve of the corners of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The length is in user coordinate system units along the y-axis. Its syntax is the same as that for [`<length>`](/en-US/docs/Web/SVG/Content_type#length).
+
+It reflects the {{SVGElement("rect")}} element's {{SVGAttr("ry")}} presentational attribute. The CSS {{cssxref("ry")}} property takes precedence over the SVG `ry` presentational attribute, so the value may not reflect the actual size of the rounded corners. The default value is `0`, which draws a rectangle with square corners.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="60" height="60" ry="15" ry="15" />
+  <rect x="60" y="0" width="60" height="60" ry="15%" ry="15%" />
+</svg>
+```
+
+We can access the computed values of the `ry` attributes:
+
+```js
+const rectangles = document.querySelectorAll("rect");
+const rySize0 = rectangle[0].ry;
+const rySize1 = rectangle[1].ry;
+console.dir(rySize0.baseVal.value); // output: 15 (the value of `ry`)
+console.dir(rySize1.baseVal.value); // output: 30 (15% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGRectElement.rx")}}

files/en-us/web/api/svgrectelement/width/index.md

@@ -0,0 +1,38 @@
+---
+title: "SVGRectElement: width property"
+short-title: width
+slug: Web/API/SVGRectElement/width
+page-type: web-api-instance-property
+browser-compat: api.SVGRectElement.width
+---
+
+{{APIRef("SVG")}}
+
+The **`width`** read-only property of the {{domxref("SVGRectElement")}} interface describes the horizontal size of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The length is in user coordinate system units along the x-axis. Its syntax is the same as that for [`<length>`](/en-US/docs/Web/SVG/Content_type#length).
+
+It reflects the {{SVGElement("rect")}} element's {{SVGAttr("width")}} presentational attribute. The CSS {{cssxref("width")}} property takes precedence over the SVG `width` presentational attribute, so the value may not reflect the elements actual size. The default value is `0`.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const rectangle = document.querySelector("rect");
+const rectWidth = rectangle.width;
+console.dir(rectWidth.baseVal.value); // the `width` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMXref("DOMRect.width")}}
+- {{domxref("SVGRectElement.height")}}

files/en-us/web/api/svgrectelement/x/index.md

@@ -0,0 +1,38 @@
+---
+title: "SVGRectElement: x property"
+short-title: x
+slug: Web/API/SVGRectElement/x
+page-type: web-api-instance-property
+browser-compat: api.SVGRectElement.x
+---
+
+{{APIRef("SVG")}}
+
+The **`x`** read-only property of the {{domxref("SVGRectElement")}} interface describes the horizontal coordinate of the position of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The `<coordinate>` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. Its syntax is the same as that for [`<length>`](/en-US/docs/Web/SVG/Content_type#length).
+
+It reflects the {{SVGElement("rect")}} element's {{SVGAttr("x")}} presentational attribute value. The CSS {{cssxref("x")}} property takes precedence over the SVG `x` presentational attribute, so the value may not reflect the elements appearance. The default value is `0`.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const rectangle = document.querySelector("rect");
+const leftPosition = rectangle.x;
+console.dir(leftPosition.baseVal.value); // the `x` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMXref("DOMRect.x")}}
+- {{domxref("SVGRectElement.y")}}

files/en-us/web/api/svgrectelement/y/index.md

@@ -0,0 +1,38 @@
+---
+title: "SVGRectElement: y property"
+short-title: "y"
+slug: Web/API/SVGRectElement/y
+page-type: web-api-instance-property
+browser-compat: api.SVGRectElement.y
+---
+
+{{APIRef("SVG")}}
+
+The **`y`** read-only property of the {{domxref("SVGRectElement")}} interface describes the vertical coordinate of the position of an SVG rectangle as a {{domxref("SVGAnimatedLength")}}. The `<coordinate>` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the y-axis. Its syntax is the same as that for [`<length>`](/en-US/docs/Web/SVG/Content_type#length).
+
+It reflects the {{SVGElement("rect")}} element's {{SVGAttr("y")}} presentational attribute value. The CSS {{cssxref("y")}} property takes precedence over the SVG `y` presentational attribute, so the value may not reflect the elements appearance. The default value is `0`.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const rectangle = document.querySelector("rect");
+const topPosition = rectangle.y;
+console.dir(topPosition.baseVal.value); // the `y` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMXref("DOMRect.y")}}
+- {{domxref("SVGRectElement.x")}}