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..1c78f7f87d37676 --- /dev/null +++ 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 `` element, using the `dx` read-only property of the `SVGFEOffsetElement` interface. + +```html + + + + + + + + + +``` + +```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..50f3a67b37e475d --- /dev/null +++ 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 `` element, using the `dy` read-only property of the `SVGFEOffsetElement` interface. + +```html + + + + + + + + + +``` + +```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..09efbe0895ee7f0 --- /dev/null +++ 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 `` element + +In this example, we access the `in` attribute value of the `` element by using the `in1` read-only property of the `SVGFEOffsetElement` interface. + +```html + + + + + + + + + +``` + +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")}}