From 862ce9165632a5f8baacd9fc97321049f3c72bba Mon Sep 17 00:00:00 2001
From: yashrajbharticybtekk <y.bharti@cybtekk.com>
Date: Sun, 29 Dec 2024 17:12:09 +0530
Subject: [PATCH] New Pages: SVGFEOffsetElement

---
 .../web/api/svgfeoffsetelement/dx/index.md    | 57 ++++++++++++++++++
 .../web/api/svgfeoffsetelement/dy/index.md    | 57 ++++++++++++++++++
 .../web/api/svgfeoffsetelement/in1/index.md   | 59 +++++++++++++++++++
 3 files changed, 173 insertions(+)
 create mode 100644 files/en-us/web/api/svgfeoffsetelement/dx/index.md
 create mode 100644 files/en-us/web/api/svgfeoffsetelement/dy/index.md
 create mode 100644 files/en-us/web/api/svgfeoffsetelement/in1/index.md

diff --git a/files/en-us/web/api/svgfeoffsetelement/dx/index.md b/files/en-us/web/api/svgfeoffsetelement/dx/index.md
new file mode 100644
index 000000000000000..5614cf50c9fa447
--- /dev/null
+++ b/files/en-us/web/api/svgfeoffsetelement/dx/index.md
@@ -0,0 +1,57 @@
+---
+title: "SVGFEOffsetElement: dx property"
+short-title: dx
+slug: Web/API/SVGFEOffsetElement/dx
+page-type: web-api-instance-property
+browser-compat: api.SVGFEOffsetElement.dx
+---
+
+{{APIRef("SVG")}}
+
+The **`dx`** read-only property of the {{domxref("SVGFEOffsetElement")}} interface reflects the {{SVGAttr("dx")}} attribute of the given {{SVGElement("feOffset")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `dx` Property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="offsetFilter">
+      <!-- Applies an offset to the SourceGraphic -->
+      <feOffset in="SourceGraphic" dx="15" dy="10" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#offsetFilter)" />
+</svg>
+```
+
+```js
+// Select the feOffset element
+const offsetElement = document.querySelector("feOffset");
+
+// Access the dx property
+console.log(offsetElement.dx.baseVal); // Output: 15
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfeoffsetelement/dy/index.md b/files/en-us/web/api/svgfeoffsetelement/dy/index.md
new file mode 100644
index 000000000000000..36b15bb5027dc0e
--- /dev/null
+++ b/files/en-us/web/api/svgfeoffsetelement/dy/index.md
@@ -0,0 +1,57 @@
+---
+title: "SVGFEOffsetElement: dy property"
+short-title: dy
+slug: Web/API/SVGFEOffsetElement/dy
+page-type: web-api-instance-property
+browser-compat: api.SVGFEOffsetElement.dy
+---
+
+{{APIRef("SVG")}}
+
+The **`dy`** read-only property of the {{domxref("SVGFEOffsetElement")}} interface reflects the {{SVGAttr("dy")}} attribute of the given {{SVGElement("feOffset")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `dy` Property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="offsetFilter">
+      <!-- Applies an offset to the SourceGraphic -->
+      <feOffset in="SourceGraphic" dx="15" dy="10" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#offsetFilter)" />
+</svg>
+```
+
+```js
+// Select the feOffset element
+const offsetElement = document.querySelector("feOffset");
+
+// Access the dy property
+console.log(offsetElement.dy.baseVal); // Output: 10
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfeoffsetelement/in1/index.md b/files/en-us/web/api/svgfeoffsetelement/in1/index.md
new file mode 100644
index 000000000000000..b919580e019bc3f
--- /dev/null
+++ b/files/en-us/web/api/svgfeoffsetelement/in1/index.md
@@ -0,0 +1,59 @@
+---
+title: "SVGFEOffsetElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFEOffsetElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFEOffsetElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFEOffsetElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feOffset")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+### Accessing the `in` Property of `feOffset` Element
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="offsetFilter">
+      <!-- Applies an offset to the SourceGraphic -->
+      <feOffset in="SourceGraphic" dx="10" dy="10" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#offsetFilter)" />
+</svg>
+```
+
+We can access the `in` attribute of the `feOffset` element.
+
+```js
+// Select the feOffset element
+const offsetElement = document.querySelector("feOffset");
+
+// Access the in1 property
+console.log(offsetElement.in1.baseVal); // Output: "SourceGraphic"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}