New Pages: SVGFEOffsetElement (#37436)

* New Pages: SVGFEOffsetElement * Update files/en-us/web/api/svgfeoffsetelement/in1/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfeoffsetelement/dx/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfeoffsetelement/dy/index.md Co-authored-by: Estelle Weyl <[email protected]> --------- Co-authored-by: Estelle Weyl <[email protected]>
mdn · Jan 29, 2025 · f9c8cab · f9c8cab
1 parent ea27e60
commit f9c8cab
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgfeoffsetelement/dx/index.md b/files/en-us/web/api/svgfeoffsetelement/dx/index.md
@@ -0,0 +1,59 @@
+---
+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` attribute
+
+In this example, we access the amount to offset, or horizontal shift, of the `<feOffset>` element, using the `dx` read-only property of the `SVGFEOffsetElement` interface.
+
+```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
@@ -0,0 +1,59 @@
+---
+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` attribute
+
+In this example, we access the vertical offset, or shift, of the `<feOffset>` element, using the `dy` read-only property of the `SVGFEOffsetElement` interface.
+
+```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
@@ -0,0 +1,61 @@
+---
+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` attribute of `<feOffset>` element
+
+In this example, we access the `in` attribute value of the `<feOffset>` element by using the `in1` read-only property of the `SVGFEOffsetElement` interface.
+
+```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")}}