New Pages: SVGFESpotLightElement (#37439)

* New Pages: SVGFESpotLightElement * Update files/en-us/web/api/svgfespotlightelement/pointsatx/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfespotlightelement/pointsaty/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfespotlightelement/limitingconeangle/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfespotlightelement/pointsatz/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfespotlightelement/specularexponent/index.md Co-authored-by: Estelle Weyl <[email protected]> --------- Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Estelle Weyl <[email protected]>
mdn · Jan 29, 2025 · b73d366 · b73d366
1 parent 6fbc4d2
commit b73d366
Show file tree

Hide file tree

Showing 6 changed files with 347 additions and 6 deletions.
diff --git a/files/en-us/web/api/svgfespotlightelement/index.md b/files/en-us/web/api/svgfespotlightelement/index.md
@@ -21,12 +21,12 @@ _This interface also inherits properties from its parent interface, {{domxref("S
   - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("y")}} attribute of the given element.
 - {{domxref("SVGFESpotLightElement.z")}} {{ReadOnlyInline}}
   - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("z")}} attribute of the given element.
-- {{domxref("SVGFESpotLightElement.pointAtX")}} {{ReadOnlyInline}}
-  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("pointAtX")}} attribute of the given element.
-- {{domxref("SVGFESpotLightElement.pointAtY")}} {{ReadOnlyInline}}
-  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("pointAtY")}} attribute of the given element.
-- {{domxref("SVGFESpotLightElement.pointAtZ")}} {{ReadOnlyInline}}
-  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("pointAtZ")}} attribute of the given element.
+- {{domxref("SVGFESpotLightElement.pointsAtX")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("pointsAtX")}} attribute of the given element.
+- {{domxref("SVGFESpotLightElement.pointsAtY")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("pointsAtY")}} attribute of the given element.
+- {{domxref("SVGFESpotLightElement.pointsAtZ")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("pointsAtZ")}} attribute of the given element.
 - {{domxref("SVGFESpotLightElement.specularExponent")}} {{ReadOnlyInline}}
   - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("specularExponent")}} attribute of the given element.
 - {{domxref("SVGFESpotLightElement.limitingConeAngle")}} {{ReadOnlyInline}}

diff --git a/files/en-us/web/api/svgfespotlightelement/limitingconeangle/index.md b/files/en-us/web/api/svgfespotlightelement/limitingconeangle/index.md
@@ -0,0 +1,73 @@
+---
+title: "SVGFESpotLightElement: limitingConeAngle property"
+short-title: limitingConeAngle
+slug: Web/API/SVGFESpotLightElement/limitingConeAngle
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpotLightElement.limitingConeAngle
+---
+
+{{APIRef("SVG")}}
+
+The **`limitingConeAngle`** read-only property of the {{domxref("SVGFESpotLightElement")}} interface reflects the {{SVGAttr("limitingConeAngle")}} attribute of the given {{SVGElement("feSpotLight")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `limitingConeAngle` attribute of the `<feSpotLight>` element
+
+In this example, we access the angle in degrees between the spot light axis (i.e. the axis between the light source and the point to which it is pointing at) and the spot light cone, by using the `limitingConeAngle` read-only property of the `SVGFESpotLightElement` interface.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="specularLightingFilter">
+      <!-- Apply a specular light effect to the SourceGraphic -->
+      <feSpecularLighting
+        in="SourceGraphic"
+        specularExponent="40"
+        lighting-color="lime"
+        surfaceScale="5">
+        <feSpotLight
+          x="100"
+          y="100"
+          z="50"
+          pointsAtX="100"
+          pointsAtY="100"
+          limitingConeAngle="30"
+          specularExponent="40" />
+      </feSpecularLighting>
+    </filter>
+  </defs>
+
+  <!-- A circle to display the effect of the lighting -->
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:lightblue;"
+    filter="url(#specularLightingFilter)" />
+</svg>
+```
+
+```js
+// Select the feSpotLight element
+const spotLightElement = document.querySelector("feSpotLight");
+
+// Access the limitingConeAngle property
+console.log(spotLightElement.limitingConeAngle.baseVal); // Output: 30
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfespotlightelement/pointsatx/index.md b/files/en-us/web/api/svgfespotlightelement/pointsatx/index.md
@@ -0,0 +1,66 @@
+---
+title: "SVGFESpotLightElement: pointsAtX property"
+short-title: pointsAtX
+slug: Web/API/SVGFESpotLightElement/pointsAtX
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpotLightElement.pointsAtX
+---
+
+{{APIRef("SVG")}}
+
+The **`pointsAtX`** read-only property of the {{domxref("SVGFESpotLightElement")}} interface reflects the {{SVGAttr("pointsAtX")}} attribute of the given {{SVGElement("feSpotLight")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `pointsAtX` attribute of the `<feSpotLight>` element
+
+In this example, we access the `x` location of the `<feSpotLight>` element in the SVG coordinate system by using the `pointsAtX` read-only property of the `SVGFESpotLightElement` interface.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="specularLightingFilter">
+      <!-- Apply a specular light effect to the SourceGraphic -->
+      <feSpecularLighting
+        in="SourceGraphic"
+        specularExponent="20"
+        lighting-color="hotpink"
+        surfaceScale="30">
+        <feSpotLight
+          x="10"
+          y="50"
+          z="150"
+          pointsAtX="150"
+          pointsAtY="100"
+          pointsAtZ="0"
+          specularExponent="20" />
+      </feSpecularLighting>
+    </filter>
+  </defs>
+
+  <!-- A circle to display the effect of the lighting -->
+  <circle cx="100" cy="100" r="50" filter="url(#specularLightingFilter)" />
+</svg>
+```
+
+```js
+// Select the feSpotLight element
+const spotLightElement = document.querySelector("feSpotLight");
+console.log(spotLightElement.pointsAtX.baseVal); // Output: 150
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfespotlightelement/pointsaty/index.md b/files/en-us/web/api/svgfespotlightelement/pointsaty/index.md
@@ -0,0 +1,66 @@
+---
+title: "SVGFESpotLightElement: pointsAtY property"
+short-title: pointsAtY
+slug: Web/API/SVGFESpotLightElement/pointsAtY
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpotLightElement.pointsAtY
+---
+
+{{APIRef("SVG")}}
+
+The **`pointsAtY`** read-only property of the {{domxref("SVGFESpotLightElement")}} interface reflects the {{SVGAttr("pointsAtY")}} attribute of the given {{SVGElement("feSpotLight")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `pointsAtY` attribute of the `<feSpotLight>` element
+
+In this example, we access the `y` location of the `<feSpotLight>` element in the SVG coordinate system by using the `pointsAtY` read-only property of the `SVGFESpotLightElement` interface.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="specularLightingFilter">
+      <!-- Apply a specular light effect to the SourceGraphic -->
+      <feSpecularLighting
+        in="SourceGraphic"
+        specularExponent="20"
+        lighting-color="hotpink"
+        surfaceScale="30">
+        <feSpotLight
+          x="10"
+          y="50"
+          z="150"
+          pointsAtX="150"
+          pointsAtY="100"
+          pointsAtZ="0"
+          specularExponent="20" />
+      </feSpecularLighting>
+    </filter>
+  </defs>
+
+  <!-- A circle to display the effect of the lighting -->
+  <circle cx="100" cy="100" r="50" filter="url(#specularLightingFilter)" />
+</svg>
+```
+
+```js
+// Select the feSpotLight element
+const spotLightElement = document.querySelector("feSpotLight");
+console.log(spotLightElement.pointsAtY.baseVal); // Output: 100
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfespotlightelement/pointsatz/index.md b/files/en-us/web/api/svgfespotlightelement/pointsatz/index.md
@@ -0,0 +1,66 @@
+---
+title: "SVGFESpotLightElement: pointsAtZ property"
+short-title: pointsAtZ
+slug: Web/API/SVGFESpotLightElement/pointsAtZ
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpotLightElement.pointsAtZ
+---
+
+{{APIRef("SVG")}}
+
+The **`pointsAtZ`** read-only property of the {{domxref("SVGFESpotLightElement")}} interface reflects the {{SVGAttr("pointsAtZ")}} attribute of the given {{SVGElement("feSpotLight")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `pointsAtZ` attribute of the `<feSpotLight>` element
+
+In this example, we access the `z` location for the light source created by the `<feSpotLight>` SVG filter element in the SVG coordinate system by using the `pointsAtZ` read-only property of the `SVGFESpotLightElement` interface.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="specularLightingFilter">
+      <!-- Apply a specular light effect to the SourceGraphic -->
+      <feSpecularLighting
+        in="SourceGraphic"
+        specularExponent="20"
+        lighting-color="hotpink"
+        surfaceScale="30">
+        <feSpotLight
+          x="10"
+          y="50"
+          z="150"
+          pointsAtX="150"
+          pointsAtY="100"
+          pointsAtZ="0"
+          specularExponent="20" />
+      </feSpecularLighting>
+    </filter>
+  </defs>
+
+  <!-- A circle to display the effect of the lighting -->
+  <circle cx="100" cy="100" r="50" filter="url(#specularLightingFilter)" />
+</svg>
+```
+
+```js
+// Select the feSpotLight element
+const spotLightElement = document.querySelector("feSpotLight");
+console.log(spotLightElement.pointsAtZ.baseVal); // Output: 0
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfespotlightelement/specularexponent/index.md b/files/en-us/web/api/svgfespotlightelement/specularexponent/index.md
@@ -0,0 +1,70 @@
+---
+title: "SVGFESpotLightElement: specularExponent property"
+short-title: specularExponent
+slug: Web/API/SVGFESpotLightElement/specularExponent
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpotLightElement.specularExponent
+---
+
+{{APIRef("SVG")}}
+
+The **`specularExponent`** read-only property of the {{domxref("SVGFESpotLightElement")}} interface reflects the {{SVGAttr("specularExponent")}} attribute of the given {{SVGElement("feSpotLight")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `specularExponent` attribute of the `<feSpotLight>` element
+
+In this example, we access the exponent value controlling the focus of the `<feSpotLight>` filter element's light source by using the `specularExponent` read-only property of the `SVGFESpotLightElement` interface.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="specularLightingFilter">
+      <!-- Apply a specular light effect to the SourceGraphic -->
+      <feSpecularLighting
+        in="SourceGraphic"
+        specularExponent="40"
+        lighting-color="hotpink"
+        surfaceScale="5">
+        <feSpotLight
+          x="100"
+          y="100"
+          z="50"
+          pointsAtX="100"
+          pointsAtY="100"
+          specularExponent="40" />
+      </feSpecularLighting>
+    </filter>
+  </defs>
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:lightblue;"
+    filter="url(#specularLightingFilter)" />
+</svg>
+```
+
+```js
+// Select the feSpotLight element
+const spotLightElement = document.querySelector("feSpotLight");
+
+// Access the specularExponent property
+console.log(spotLightElement.specularExponent.baseVal); // Output: 40
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}