diff --git a/files/en-us/web/api/svgforeignobjectelement/height/index.md b/files/en-us/web/api/svgforeignobjectelement/height/index.md new file mode 100644 index 000000000000000..6e00e7318f6ada5 --- /dev/null +++ b/files/en-us/web/api/svgforeignobjectelement/height/index.md @@ -0,0 +1,64 @@ +--- +title: "SVGForeignObjectElement: height property" +short-title: height +slug: Web/API/SVGForeignObjectElement/height +page-type: web-api-instance-property +browser-compat: api.SVGForeignObjectElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGForeignObjectElement")}} interface describes the height of the **`foreignObject`** element. It reflects the computed value of the {{SVGAttr("height")}} attribute on the {{SVGElement("foreignObject")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the **`foreignObject`** element in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + +
+

This is a foreign object.

+
+ + +
+

This is another foreign object.

+
+ + + + + +``` + +We can access the computed values of the `height` attributes: + +```js +const foreignObjects = document.querySelectorAll("foreignObject"); +const heightObject1 = foreignObjects[0].height; +const heightObject2 = foreignObjects[1].height; + +console.dir(heightObject1.baseVal.value); // output: 50 +console.dir(heightObject2.baseVal.value); // output: 20 (10% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGForeignObjectElement.width")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgforeignobjectelement/width/index.md b/files/en-us/web/api/svgforeignobjectelement/width/index.md new file mode 100644 index 000000000000000..2615572adadf717 --- /dev/null +++ b/files/en-us/web/api/svgforeignobjectelement/width/index.md @@ -0,0 +1,64 @@ +--- +title: "SVGForeignObjectElement: width property" +short-title: width +slug: Web/API/SVGForeignObjectElement/width +page-type: web-api-instance-property +browser-compat: api.SVGForeignObjectElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGForeignObjectElement")}} interface describes the width of the **`foreignObject`** element. It reflects the computed value of the {{SVGAttr("width")}} attribute on the {{SVGElement("foreignObject")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the **`foreignObject`** element in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + +
+

This is a foreign object.

+
+ + +
+

This is another foreign object.

+
+ + + + + +``` + +We can access the computed values of the `width` attributes: + +```js +const foreignObjects = document.querySelectorAll("foreignObject"); +const widthObject1 = foreignObjects[0].width; +const widthObject2 = foreignObjects[1].width; + +console.dir(widthObject1.baseVal.value); // output: 100 +console.dir(widthObject2.baseVal.value); // output: 20 (10% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGForeignObjectElement.height")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgforeignobjectelement/x/index.md b/files/en-us/web/api/svgforeignobjectelement/x/index.md new file mode 100644 index 000000000000000..8122c37f4ea3baf --- /dev/null +++ b/files/en-us/web/api/svgforeignobjectelement/x/index.md @@ -0,0 +1,64 @@ +--- +title: "SVGForeignObjectElement: x property" +short-title: x +slug: Web/API/SVGForeignObjectElement/x +page-type: web-api-instance-property +browser-compat: api.SVGForeignObjectElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGForeignObjectElement")}} interface describes the x-axis coordinate of the **`foreignObject`** element. It reflects the computed value of the {{SVGAttr("x")}} attribute on the {{SVGElement("foreignObject")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the **`foreignObject`** element in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + +
+

This is a foreign object.

+
+ + +
+

This is another foreign object.

+
+ + + + + +``` + +We can access the computed values of the `x` attributes: + +```js +const foreignObjects = document.querySelectorAll("foreignObject"); +const xObject1 = foreignObjects[0].x; +const xObject2 = foreignObjects[1].x; + +console.dir(xObject1.baseVal.value); // output: 50 +console.dir(xObject2.baseVal.value); // output: 50 (25% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGForeignObjectElement.y")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgforeignobjectelement/y/index.md b/files/en-us/web/api/svgforeignobjectelement/y/index.md new file mode 100644 index 000000000000000..24b3bea8140809b --- /dev/null +++ b/files/en-us/web/api/svgforeignobjectelement/y/index.md @@ -0,0 +1,64 @@ +--- +title: "SVGForeignObjectElement: y property" +short-title: "y" +slug: Web/API/SVGForeignObjectElement/y +page-type: web-api-instance-property +browser-compat: api.SVGForeignObjectElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGForeignObjectElement")}} interface describes the y-axis coordinate of the **`foreignObject`** element. It reflects the computed value of the {{SVGAttr("y")}} attribute on the {{SVGElement("foreignObject")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the **`foreignObject`** element in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + +
+

This is a foreign object.

+
+ + +
+

This is another foreign object.

+
+ + + + + +``` + +We can access the computed values of the `y` attributes: + +```js +const foreignObjects = document.querySelectorAll("foreignObject"); +const yObject1 = foreignObjects[0].y; +const yObject2 = foreignObjects[1].y; + +console.dir(yObject1.baseVal.value); // output: 75 +console.dir(yObject2.baseVal.value); // output: 100 (50% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGForeignObjectElement.x")}} +- {{domxref("SVGAnimatedLength.baseVal")}}