mdn · yashrajbharti · Dec 29, 2024
@@ -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
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="filter1">
+      <!-- First Displacement Map -->
+      <feDisplacementMap in="SourceGraphic" scale="20">
+        <feFuncR type="table" tableValues="0 1" />
+      </feDisplacementMap>
+
+      <!-- Second Displacement Map -->
+      <feDisplacementMap in="BackgroundImage" scale="30">
+        <feFuncR type="table" tableValues="0.5 1" />
+      </feDisplacementMap>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#filter1)" />
+  <circle cx="100" cy="100" r="50" style="fill:blue;" filter="url(#filter1)" />
+</svg>
+```
+
+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")}}
@@ -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
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="filter1">
+      <!-- First Displacement Map -->
+      <feDisplacementMap in="SourceGraphic" in2="BackgroundImage" scale="20">
+        <feFuncR type="table" tableValues="0 1" />
+      </feDisplacementMap>
+
+      <!-- Second Displacement Map -->
+      <feDisplacementMap in="SourceGraphic" in2="BackgroundImage" scale="30">
+        <feFuncR type="table" tableValues="0.5 1" />
+      </feDisplacementMap>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#filter1)" />
+  <circle cx="100" cy="100" r="50" style="fill:blue;" filter="url(#filter1)" />
+</svg>
+```
+
+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")}}
@@ -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
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="filter1">
+      <!-- Displacement Map -->
+      <feDisplacementMap in="SourceGraphic" scale="20">
+        <feFuncR type="table" tableValues="0 1" />
+      </feDisplacementMap>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#filter1)" />
+</svg>
+```
+
+```js
+const displacementMap = document.querySelector("feDisplacementMap");
+
+console.log(displacementMap.scale.baseVal); // Output: 20
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
@@ -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
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="displacementFilter">
+      <!-- Displacement Map with xChannelSelector set to Red Channel -->
+      <feDisplacementMap in="SourceGraphic" scale="20" xChannelSelector="R">
+        <feFuncR type="table" tableValues="0 1" />
+      </feDisplacementMap>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#displacementFilter)" />
+</svg>
+```
+
+```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")}}
@@ -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
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="displacementFilter">
+      <!-- Displacement Map with yChannelSelector set to Red Channel -->
+      <feDisplacementMap in="SourceGraphic" scale="20" yChannelSelector="G">
+        <feFuncR type="table" tableValues="0 1" />
+      </feDisplacementMap>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:green;"
+    filter="url(#displacementFilter)" />
+</svg>
+```
+
+```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")}}