New Pages: SVGFEDiffuseLightingElement (#37425)

mdn · Jan 7, 2025 · e9ef767 · e9ef767
1 parent 7c67beb
commit e9ef767
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgfediffuselightingelement/diffuseconstant/index.md b/files/en-us/web/api/svgfediffuselightingelement/diffuseconstant/index.md
@@ -0,0 +1,59 @@
+---
+title: "SVGFEDiffuseLightingElement: diffuseConstant property"
+short-title: diffuseConstant
+slug: Web/API/SVGFEDiffuseLightingElement/diffuseConstant
+page-type: web-api-instance-property
+browser-compat: api.SVGFEDiffuseLightingElement.diffuseConstant
+---
+
+{{APIRef("SVG")}}
+
+The **`diffuseConstant`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("diffuseConstant")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Access the `diffuseConstant` property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="diffuseLightingFilter">
+      <feDiffuseLighting
+        in="SourceGraphic"
+        diffuseConstant="1.5"
+        lighting-color="white">
+        <feDistantLight azimuth="45" elevation="55" />
+      </feDiffuseLighting>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#diffuseLightingFilter)" />
+</svg>
+```
+
+```js
+const diffuseLighting = document.querySelector("feDiffuseLighting");
+
+console.log(diffuseLighting.diffuseConstant.baseVal); // Output: 1.5
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfediffuselightingelement/in1/index.md b/files/en-us/web/api/svgfediffuselightingelement/in1/index.md
@@ -0,0 +1,62 @@
+---
+title: "SVGFEDiffuseLightingElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFEDiffuseLightingElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFEDiffuseLightingElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+### Accessing the `in` Property of `feDiffuseLighting` Element
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="diffuseLightingFilter">
+      <feDiffuseLighting
+        in="SourceGraphic"
+        result="diffuseLightingResult"
+        lighting-color="white"
+        surfaceScale="1">
+        <feDistantLight azimuth="45" elevation="55" />
+      </feDiffuseLighting>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#diffuseLightingFilter)" />
+</svg>
+```
+
+We can access the `in` attribute of the `feDiffuseLighting` element.
+
+```js
+const diffuseLighting = document.querySelector("feDiffuseLighting");
+
+console.log(diffuseLighting.in1.baseVal); // Output: "SourceGraphic"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}
diff --git a/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthx/index.md b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthx/index.md
@@ -0,0 +1,27 @@
+---
+title: "SVGFEDiffuseLightingElement: kernelUnitLengthX property"
+short-title: kernelUnitLengthX
+slug: Web/API/SVGFEDiffuseLightingElement/kernelUnitLengthX
+page-type: web-api-instance-property
+browser-compat: api.SVGFEDiffuseLightingElement.kernelUnitLengthX
+---
+
+{{APIRef("SVG")}}
+
+The **`kernelUnitLengthX`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the X component of the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthy/index.md b/files/en-us/web/api/svgfediffuselightingelement/kernelunitlengthy/index.md
@@ -0,0 +1,27 @@
+---
+title: "SVGFEDiffuseLightingElement: kernelUnitLengthY property"
+short-title: kernelUnitLengthY
+slug: Web/API/SVGFEDiffuseLightingElement/kernelUnitLengthY
+page-type: web-api-instance-property
+browser-compat: api.SVGFEDiffuseLightingElement.kernelUnitLengthY
+---
+
+{{APIRef("SVG")}}
+
+The **`kernelUnitLengthY`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the Y component of the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfediffuselightingelement/surfacescale/index.md b/files/en-us/web/api/svgfediffuselightingelement/surfacescale/index.md
@@ -0,0 +1,59 @@
+---
+title: "SVGFEDiffuseLightingElement: surfaceScale property"
+short-title: surfaceScale
+slug: Web/API/SVGFEDiffuseLightingElement/surfaceScale
+page-type: web-api-instance-property
+browser-compat: api.SVGFEDiffuseLightingElement.surfaceScale
+---
+
+{{APIRef("SVG")}}
+
+The **`surfaceScale`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("surfaceScale")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Access the `surfaceScale` property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="diffuseLightingFilter">
+      <feDiffuseLighting
+        in="SourceGraphic"
+        surfaceScale="2"
+        lighting-color="white">
+        <feDistantLight azimuth="45" elevation="55" />
+      </feDiffuseLighting>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#diffuseLightingFilter)" />
+</svg>
+```
+
+```js
+const diffuseLighting = document.querySelector("feDiffuseLighting");
+
+console.log(diffuseLighting.surfaceScale.baseVal); // Output: 2
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}