MDN Feature Pages for SVGEllipseElement (#37306)

files/en-us/web/api/svgellipseelement/cx/index.md

@@ -0,0 +1,52 @@
+---
+title: "SVGEllipseElement: cx property"
+short-title: cx
+slug: Web/API/SVGEllipseElement/cx
+page-type: web-api-instance-property
+browser-compat: api.SVGEllipseElement.cx
+---
+
+{{APIRef("SVG")}}
+
+The **`cx`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the x-axis coordinate of the center of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("cx")}} attribute on the {{SVGElement("ellipse")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the ellipse's center in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50" cy="75" rx="30" ry="20" fill="blue" />
+  <ellipse cx="25%" cy="50%" rx="10%" ry="5%" fill="red" />
+</svg>
+```
+
+We can access the computed values of the `cx` attributes:
+
+```js
+const ellipses = document.querySelectorAll("ellipse");
+const cxPos0 = ellipses[0].cx;
+const cxPos1 = ellipses[1].cx;
+
+console.dir(cxPos0.baseVal.value); // output: 50
+console.dir(cxPos1.baseVal.value); // output: 50 (25% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGEllipseElement.cy")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

files/en-us/web/api/svgellipseelement/cy/index.md

@@ -0,0 +1,52 @@
+---
+title: "SVGEllipseElement: cy property"
+short-title: cy
+slug: Web/API/SVGEllipseElement/cy
+page-type: web-api-instance-property
+browser-compat: api.SVGEllipseElement.cy
+---
+
+{{APIRef("SVG")}}
+
+The **`cy`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the y-axis coordinate of the center of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("cy")}} attribute on the {{SVGElement("ellipse")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the ellipse's center in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50" cy="75" rx="30" ry="20" fill="blue" />
+  <ellipse cx="25%" cy="50%" rx="10%" ry="5%" fill="red" />
+</svg>
+```
+
+We can access the computed values of the `cy` attributes:
+
+```js
+const ellipses = document.querySelectorAll("ellipse");
+const cyPos0 = ellipses[0].cy;
+const cyPos1 = ellipses[1].cy;
+
+console.dir(cyPos0.baseVal.value); // output: 75
+console.dir(cyPos1.baseVal.value); // output: 100 (50% of the viewBox height, 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGEllipseElement.cx")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

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

@@ -0,0 +1,52 @@
+---
+title: "SVGEllipseElement: rx property"
+short-title: rx
+slug: Web/API/SVGEllipseElement/rx
+page-type: web-api-instance-property
+browser-compat: api.SVGEllipseElement.rx
+---
+
+{{APIRef("SVG")}}
+
+The **`rx`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the x-axis radius of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("rx")}} attribute on the {{SVGElement("ellipse")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the radius of the ellipse along the x-axis in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50" cy="75" rx="30" ry="20" fill="blue" />
+  <ellipse cx="25%" cy="50%" rx="10%" ry="5%" fill="red" />
+</svg>
+```
+
+We can access the computed values of the `rx` attributes:
+
+```js
+const ellipses = document.querySelectorAll("ellipse");
+const rxPos0 = ellipses[0].rx;
+const rxPos1 = ellipses[1].rx;
+
+console.dir(rxPos0.baseVal.value); // output: 30
+console.dir(rxPos1.baseVal.value); // output: 20 (10% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGEllipseElement.ry")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

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

@@ -0,0 +1,52 @@
+---
+title: "SVGEllipseElement: ry property"
+short-title: ry
+slug: Web/API/SVGEllipseElement/ry
+page-type: web-api-instance-property
+browser-compat: api.SVGEllipseElement.ry
+---
+
+{{APIRef("SVG")}}
+
+The **`ry`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the y-axis radius of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("ry")}} attribute on the {{SVGElement("ellipse")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the radius of the ellipse along the y-axis in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50" cy="75" rx="30" ry="20" fill="blue" />
+  <ellipse cx="25%" cy="50%" rx="10%" ry="5%" fill="red" />
+</svg>
+```
+
+We can access the computed values of the `ry` attributes:
+
+```js
+const ellipses = document.querySelectorAll("ellipse");
+const ryPos0 = ellipses[0].ry;
+const ryPos1 = ellipses[1].ry;
+
+console.dir(ryPos0.baseVal.value); // output: 20
+console.dir(ryPos1.baseVal.value); // output: 10 (5% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGEllipseElement.rx")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}