New Pages: SVGFESpecularLightingElement (mdn#37437)

OnkarRuikar · Jan 5, 2025 · 85890fb · 85890fb
1 parent d8f5fcc
commit 85890fb
Show file tree

Hide file tree

Showing 4 changed files with 252 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgfespecularlightingelement/in1/index.md b/files/en-us/web/api/svgfespecularlightingelement/in1/index.md
@@ -0,0 +1,65 @@
+---
+title: "SVGFESpecularLightingElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFESpecularLightingElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpecularLightingElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feSpecularLighting")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+### Accessing the `in` Property of `feSpecularLighting` Element
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="specularLightingFilter">
+      <!-- Adds specular lighting effect to the SourceGraphic -->
+      <feSpecularLighting
+        in="SourceGraphic"
+        specularExponent="20"
+        lighting-color="hotpink"
+        surfaceScale="2">
+        <fePointLight x="50" y="50" z="30" />
+      </feSpecularLighting>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#specularLightingFilter)" />
+</svg>
+```
+
+We can access the `in` attribute of the `feSpecularLighting` element.
+
+```js
+// Select the feSpecularLighting element
+const specularLightingElement = document.querySelector("feSpecularLighting");
+
+// Access the in1 property
+console.log(specularLightingElement.in1.baseVal); // Output: "SourceGraphic"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}
diff --git a/files/en-us/web/api/svgfespecularlightingelement/specularconstant/index.md b/files/en-us/web/api/svgfespecularlightingelement/specularconstant/index.md
@@ -0,0 +1,62 @@
+---
+title: "SVGFESpecularLightingElement: specularConstant property"
+short-title: specularConstant
+slug: Web/API/SVGFESpecularLightingElement/specularConstant
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpecularLightingElement.specularConstant
+---
+
+{{APIRef("SVG")}}
+
+The **`specularConstant`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface reflects the {{SVGAttr("specularConstant")}} attribute of the given {{SVGElement("feSpecularLighting")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `specularConstant` Property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="specularLightingFilter">
+      <!-- Applies specular lighting with a constant specular reflectance -->
+      <feSpecularLighting
+        in="SourceGraphic"
+        specularConstant="0.5"
+        lighting-color="hotpink">
+        <fePointLight x="50" y="50" z="30" />
+      </feSpecularLighting>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#specularLightingFilter)" />
+</svg>
+```
+
+```js
+// Select the feSpecularLighting element
+const specularLightingElement = document.querySelector("feSpecularLighting");
+
+// Access the specularConstant property
+console.log(specularLightingElement.specularConstant.baseVal); // Output: 0.5
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfespecularlightingelement/specularexponent/index.md b/files/en-us/web/api/svgfespecularlightingelement/specularexponent/index.md
@@ -0,0 +1,62 @@
+---
+title: "SVGFESpecularLightingElement: specularExponent property"
+short-title: specularExponent
+slug: Web/API/SVGFESpecularLightingElement/specularExponent
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpecularLightingElement.specularExponent
+---
+
+{{APIRef("SVG")}}
+
+The **`specularExponent`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface reflects the {{SVGAttr("specularExponent")}} attribute of the given {{SVGElement("feSpecularLighting")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `specularExponent` Property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="specularLightingFilter">
+      <!-- Adds specular lighting with a specified exponent -->
+      <feSpecularLighting
+        in="SourceGraphic"
+        specularExponent="40"
+        lighting-color="hotpink">
+        <fePointLight x="50" y="50" z="30" />
+      </feSpecularLighting>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#specularLightingFilter)" />
+</svg>
+```
+
+```js
+// Select the feSpecularLighting element
+const specularLightingElement = document.querySelector("feSpecularLighting");
+
+// Access the specularExponent property
+console.log(specularLightingElement.specularExponent.baseVal); // Output: 40
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfespecularlightingelement/surfacescale/index.md b/files/en-us/web/api/svgfespecularlightingelement/surfacescale/index.md
@@ -0,0 +1,63 @@
+---
+title: "SVGFESpecularLightingElement: surfaceScale property"
+short-title: surfaceScale
+slug: Web/API/SVGFESpecularLightingElement/surfaceScale
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpecularLightingElement.surfaceScale
+---
+
+{{APIRef("SVG")}}
+
+The **`surfaceScale`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface reflects the {{SVGAttr("surfaceScale")}} attribute of the given {{SVGElement("feSpecularLighting")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `surfaceScale` Property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="specularLightingFilter">
+      <!-- Adds specular lighting with a surface scale -->
+      <feSpecularLighting
+        in="SourceGraphic"
+        specularExponent="20"
+        lighting-color="hotpink"
+        surfaceScale="3">
+        <fePointLight x="50" y="50" z="30" />
+      </feSpecularLighting>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#specularLightingFilter)" />
+</svg>
+```
+
+```js
+// Select the feSpecularLighting element
+const specularLightingElement = document.querySelector("feSpecularLighting");
+
+// Access the surfaceScale property
+console.log(specularLightingElement.surfaceScale.baseVal); // Output: 3
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}