diff --git a/files/en-us/web/api/svgfedisplacementmapelement/in1/index.md b/files/en-us/web/api/svgfedisplacementmapelement/in1/index.md new file mode 100644 index 000000000000000..4aef93ef1b080ee --- /dev/null +++ b/files/en-us/web/api/svgfedisplacementmapelement/in1/index.md @@ -0,0 +1,66 @@ +--- +title: "SVGFEDisplacementMapElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEDisplacementMapElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEDisplacementMapElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feDisplacementMap")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +In this example, two {{SVGElement("feDisplacementMap")}} elements are defined in a filter, each with a different `in` attribute. + +```html + + + + + + + + + + + + + + + + + +``` + +We can access the `in` attribute: + +```js +const displacementMaps = document.querySelectorAll("feDisplacementMap"); + +console.log(displacementMaps[0].getAttribute("in")); // Output: "SourceGraphic" +console.log(displacementMaps[1].getAttribute("in")); // Output: "BackgroundImage" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfedisplacementmapelement/in2/index.md b/files/en-us/web/api/svgfedisplacementmapelement/in2/index.md new file mode 100644 index 000000000000000..14098b3b4cb7da6 --- /dev/null +++ b/files/en-us/web/api/svgfedisplacementmapelement/in2/index.md @@ -0,0 +1,66 @@ +--- +title: "SVGFEDisplacementMapElement: in2 property" +short-title: in2 +slug: Web/API/SVGFEDisplacementMapElement/in2 +page-type: web-api-instance-property +browser-compat: api.SVGFEDisplacementMapElement.in2 +--- + +{{APIRef("SVG")}} + +The **`in2`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface reflects the {{SVGAttr("in2")}} attribute of the given {{SVGElement("feDisplacementMap")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +In this example, two {{SVGElement("feDisplacementMap")}} elements are defined in a filter, each with a different `in2` attribute. + +```html + + + + + + + + + + + + + + + + + +``` + +We can access the `in2` attribute: + +```js +const displacementMaps = document.querySelectorAll("feDisplacementMap"); + +console.log(displacementMaps[0].getAttribute("in2")); // Output: "BackgroundImage" +console.log(displacementMaps[1].getAttribute("in2")); // Output: "BackgroundImage" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfedisplacementmapelement/scale/index.md b/files/en-us/web/api/svgfedisplacementmapelement/scale/index.md new file mode 100644 index 000000000000000..22d04de554eea7c --- /dev/null +++ b/files/en-us/web/api/svgfedisplacementmapelement/scale/index.md @@ -0,0 +1,57 @@ +--- +title: "SVGFEDisplacementMapElement: scale property" +short-title: scale +slug: Web/API/SVGFEDisplacementMapElement/scale +page-type: web-api-instance-property +browser-compat: api.SVGFEDisplacementMapElement.scale +--- + +{{APIRef("SVG")}} + +The **`scale`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface reflects the {{SVGAttr("scale")}} attribute of the given {{SVGElement("feDisplacementMap")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `scale` Property + +```html + + + + + + + + + + + +``` + +```js +const displacementMap = document.querySelector("feDisplacementMap"); + +console.log(displacementMap.scale.baseVal); // Output: 20 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfedisplacementmapelement/xchannelselector/index.md b/files/en-us/web/api/svgfedisplacementmapelement/xchannelselector/index.md new file mode 100644 index 000000000000000..c44b1c170a2f340 --- /dev/null +++ b/files/en-us/web/api/svgfedisplacementmapelement/xchannelselector/index.md @@ -0,0 +1,57 @@ +--- +title: "SVGFEDisplacementMapElement: xChannelSelector property" +short-title: xChannelSelector +slug: Web/API/SVGFEDisplacementMapElement/xChannelSelector +page-type: web-api-instance-property +browser-compat: api.SVGFEDisplacementMapElement.xChannelSelector +--- + +{{APIRef("SVG")}} + +The **`xChannelSelector`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface reflects the {{SVGAttr("xChannelSelector")}} attribute of the given {{SVGElement("feDisplacementMap")}} element. It takes one of the `SVG_CHANNEL_*` constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `xChannelSelector` Property + +```html + + + + + + + + + + + +``` + +```js +const displacementMap = document.querySelector("feDisplacementMap"); + +console.log(displacementMap.xChannelSelector.baseVal); // Output: 1 (SVG_CHANNEL_R) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedEnumeration")}} diff --git a/files/en-us/web/api/svgfedisplacementmapelement/ychannelselector/index.md b/files/en-us/web/api/svgfedisplacementmapelement/ychannelselector/index.md new file mode 100644 index 000000000000000..a25a1ffacc91e86 --- /dev/null +++ b/files/en-us/web/api/svgfedisplacementmapelement/ychannelselector/index.md @@ -0,0 +1,57 @@ +--- +title: "SVGFEDisplacementMapElement: yChannelSelector property" +short-title: yChannelSelector +slug: Web/API/SVGFEDisplacementMapElement/yChannelSelector +page-type: web-api-instance-property +browser-compat: api.SVGFEDisplacementMapElement.yChannelSelector +--- + +{{APIRef("SVG")}} + +The **`yChannelSelector`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface reflects the {{SVGAttr("yChannelSelector")}} attribute of the given {{SVGElement("feDisplacementMap")}} element. It takes one of the `SVG_CHANNEL_*` constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `yChannelSelector` Property + +```html + + + + + + + + + + + +``` + +```js +const displacementMap = document.querySelector("feDisplacementMap"); + +console.log(displacementMap.yChannelSelector.baseVal); // Output: 2 (SVG_CHANNEL_G) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedEnumeration")}}