MDN Feature Pages for SVGForeignObjectElement

mdn · Dec 20, 2024 · b038e07 · b038e07
1 parent 4238ce5
commit b038e07
Show file tree

Hide file tree

Showing 4 changed files with 256 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgforeignobjectelement/height/index.md 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 [`<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 **`foreignObject`** element 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">
+  <defs>
+    <foreignObject id="object1" x="50" y="75" width="100" height="50">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        <p>This is a foreign object.</p>
+      </div>
+    </foreignObject>
+    <foreignObject id="object2" x="25%" y="50%" width="10%" height="10%">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        <p>This is another foreign object.</p>
+      </div>
+    </foreignObject>
+  </defs>
+  <rect x="0" y="0" width="200" height="100" fill="lightblue" />
+  <rect x="0" y="100" width="200" height="100" fill="lightgreen" />
+</svg>
+```
+
+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
@@ -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 [`<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 **`foreignObject`** element 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">
+  <defs>
+    <foreignObject id="object1" x="50" y="75" width="100" height="50">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        <p>This is a foreign object.</p>
+      </div>
+    </foreignObject>
+    <foreignObject id="object2" x="25%" y="50%" width="10%" height="10%">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        <p>This is another foreign object.</p>
+      </div>
+    </foreignObject>
+  </defs>
+  <rect x="0" y="0" width="200" height="100" fill="lightblue" />
+  <rect x="0" y="100" width="200" height="100" fill="lightgreen" />
+</svg>
+```
+
+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
@@ -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 [`<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 **`foreignObject`** element 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">
+  <defs>
+    <foreignObject id="object1" x="50" y="75" width="100" height="50">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        <p>This is a foreign object.</p>
+      </div>
+    </foreignObject>
+    <foreignObject id="object2" x="25%" y="50%" width="10%" height="10%">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        <p>This is another foreign object.</p>
+      </div>
+    </foreignObject>
+  </defs>
+  <rect x="0" y="0" width="200" height="100" fill="lightblue" />
+  <rect x="0" y="100" width="200" height="100" fill="lightgreen" />
+</svg>
+```
+
+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
@@ -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 [`<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 **`foreignObject`** element 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">
+  <defs>
+    <foreignObject id="object1" x="50" y="75" width="100" height="50">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        <p>This is a foreign object.</p>
+      </div>
+    </foreignObject>
+    <foreignObject id="object2" x="25%" y="50%" width="10%" height="10%">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        <p>This is another foreign object.</p>
+      </div>
+    </foreignObject>
+  </defs>
+  <rect x="0" y="0" width="200" height="100" fill="lightblue" />
+  <rect x="0" y="100" width="200" height="100" fill="lightgreen" />
+</svg>
+```
+
+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")}}