New Pages: SVGFEDropShadowElement (#37428)

* New Pages: SVGFEDropShadowElement * Update files/en-us/web/api/svgfedropshadowelement/dx/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfedropshadowelement/dy/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfedropshadowelement/stddeviationx/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfedropshadowelement/stddeviationy/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfedropshadowelement/setstddeviation/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/svgfedropshadowelement/setstddeviation/index.md Co-authored-by: Estelle Weyl <[email protected]> * Apply suggestions from code review * Update files/en-us/web/api/svgfedropshadowelement/setstddeviation/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/svgfedropshadowelement/setstddeviation/index.md * Update files/en-us/web/api/svgfedropshadowelement/setstddeviation/index.md --------- Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
mdn · Jan 31, 2025 · 7527a11 · 7527a11
1 parent d8717e8
commit 7527a11
Show file tree

Hide file tree

Showing 7 changed files with 440 additions and 2 deletions.
diff --git a/files/en-us/web/api/svgfedropshadowelement/dx/index.md b/files/en-us/web/api/svgfedropshadowelement/dx/index.md
@@ -0,0 +1,72 @@
+---
+title: "SVGFEDropShadowElement: dx property"
+short-title: dx
+slug: Web/API/SVGFEDropShadowElement/dx
+page-type: web-api-instance-property
+browser-compat: api.SVGFEDropShadowElement.dx
+---
+
+{{APIRef("SVG")}}
+
+The **`dx`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface reflects the {{SVGAttr("dx")}} attribute of the given {{SVGElement("feDropShadow")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `dx` value
+
+In this example, we retrieve the horizontal shift of the `<feDropShadow>` by using the `dx` read-only property of the `SVGFEDropShadowElement` interface.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="drop-shadow-filter">
+      <!-- Drop Shadow with dx property set to 10 -->
+      <feDropShadow
+        in="SourceGraphic"
+        dx="10"
+        dy="10"
+        stdDeviation="5"
+        flood-color="red" />
+    </filter>
+  </defs>
+
+  <!-- Rectangle with a red shadow -->
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#drop-shadow-filter)" />
+
+  <!-- Circle with a red shadow -->
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:blue;"
+    filter="url(#drop-shadow-filter)" />
+</svg>
+```
+
+```js
+const dropShadow = document.querySelector("feDropShadow");
+
+console.log(dropShadow.dx.baseVal); // Output: 10
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfedropshadowelement/dy/index.md b/files/en-us/web/api/svgfedropshadowelement/dy/index.md
@@ -0,0 +1,72 @@
+---
+title: "SVGFEDropShadowElement: dy property"
+short-title: dy
+slug: Web/API/SVGFEDropShadowElement/dy
+page-type: web-api-instance-property
+browser-compat: api.SVGFEDropShadowElement.dy
+---
+
+{{APIRef("SVG")}}
+
+The **`dy`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface reflects the {{SVGAttr("dy")}} attribute of the given {{SVGElement("feDropShadow")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `dy` value
+
+In this example, we retrieve the vertical shift of the `<feDropShadow>` by using the `dx` read-only property of the `SVGFEDropShadowElement` interface.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="drop-shadow-filter">
+      <!-- Drop Shadow with dy property set to 10 -->
+      <feDropShadow
+        in="SourceGraphic"
+        dx="10"
+        dy="10"
+        stdDeviation="5"
+        flood-color="red" />
+    </filter>
+  </defs>
+
+  <!-- Rectangle with a red shadow -->
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#drop-shadow-filter)" />
+
+  <!-- Circle with a red shadow -->
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:blue;"
+    filter="url(#drop-shadow-filter)" />
+</svg>
+```
+
+```js
+const dropShadow = document.querySelector("feDropShadow");
+
+console.log(dropShadow.dy.baseVal); // Output: 10
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfedropshadowelement/in1/index.md b/files/en-us/web/api/svgfedropshadowelement/in1/index.md
@@ -0,0 +1,78 @@
+---
+title: "SVGFEDropShadowElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFEDropShadowElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFEDropShadowElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feDropShadow")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feDropShadow")}} 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="drop-shadow-filter">
+      <!-- First Drop Shadow applied to the SourceGraphic -->
+      <feDropShadow
+        in="SourceGraphic"
+        dx="10"
+        dy="10"
+        stdDeviation="5"
+        flood-color="red" />
+      <!-- Second Drop Shadow applied to the BackgroundImage -->
+      <feDropShadow
+        in="BackgroundImage"
+        dx="-10"
+        dy="-10"
+        stdDeviation="5"
+        flood-color="blue" />
+    </filter>
+  </defs>
+  <!-- Rectangle with red shadow -->
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#drop-shadow-filter)" />
+  <!-- Circle with blue shadow -->
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:blue;"
+    filter="url(#drop-shadow-filter)" />
+</svg>
+```
+
+We can access the `in` attribute:
+
+```js
+const dropShadows = document.querySelectorAll("feDropShadow");
+
+console.log(dropShadows[0].in1.baseVal); // Output: "SourceGraphic"
+console.log(dropShadows[1].in1.baseVal); // Output: "BackgroundImage"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}
diff --git a/files/en-us/web/api/svgfedropshadowelement/index.md b/files/en-us/web/api/svgfedropshadowelement/index.md
@@ -26,9 +26,9 @@ _This interface also inherits properties from its parent interface, {{domxref("S
 - {{domxref("SVGFEDropShadowElement.result")}} {{ReadOnlyInline}}
   - : An {{domxref("SVGAnimatedString")}} corresponding to the {{SVGAttr("result")}} attribute of the given element.
 - {{domxref("SVGFEDropShadowElement.stdDeviationX")}} {{ReadOnlyInline}}
-  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the (possibly automatically computed) X component of the {{SVGAttr("stdDeviationX")}} attribute of the given element.
+  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the (possibly automatically computed) X component of the {{SVGAttr("stdDeviation")}} attribute of the given element.
 - {{domxref("SVGFEDropShadowElement.stdDeviationY")}} {{ReadOnlyInline}}
-  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the (possibly automatically computed) Y component of the {{SVGAttr("stdDeviationY")}} attribute of the given element.
+  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the (possibly automatically computed) Y component of the {{SVGAttr("stdDeviation")}} attribute of the given element.
 - {{domxref("SVGFEDropShadowElement.width")}} {{ReadOnlyInline}}
   - : An {{domxref("SVGAnimatedLength")}} corresponding to the {{SVGAttr("width")}} attribute of the given element.
 - {{domxref("SVGFEDropShadowElement.x")}} {{ReadOnlyInline}}

diff --git a/files/en-us/web/api/svgfedropshadowelement/setstddeviation/index.md b/files/en-us/web/api/svgfedropshadowelement/setstddeviation/index.md
@@ -0,0 +1,88 @@
+---
+title: "SVGFEDropShadowElement: setStdDeviation() method"
+short-title: setStdDeviation()
+slug: Web/API/SVGFEDropShadowElement/setStdDeviation
+page-type: web-api-instance-method
+browser-compat: api.SVGFEDropShadowElement.setStdDeviation
+---
+
+{{APIRef("SVG")}}
+
+The `setStdDeviation()` method of the {{domxref("SVGFEDropShadowElement")}} interface sets the values for the {{SVGAttr("stdDeviation")}} attribute.
+
+## Syntax
+
+```js-nolint
+SVGFEDropShadowElement.setStdDeviation(x, y)
+```
+
+### Parameters
+
+- `x`
+  - : A float representing X component of the {{SVGAttr("stdDeviation")}} attribute.
+- `y`
+  - : A float representing Y component of the {{SVGAttr("stdDeviation")}} attribute.
+
+### Return value
+
+None ({{jsxref('undefined')}}).
+
+## Examples
+
+### Using `setStdDeviation()`
+
+In this example, we set the horizontal and vertical standard deviations for a blur operation for a `<feDropShadow>` filter shadow effect using the `setStdDeviation()` method of the `SVGFEDropShadowElement` interface.
+
+```html
+<svg height="200" width="200" viewBox="0 0 200 200">
+  <defs>
+    <filter id="drop-shadow-filter">
+      <feDropShadow
+        in="SourceGraphic"
+        dx="10"
+        dy="10"
+        stdDeviation="5 5"
+        flood-color="gray" />
+    </filter>
+  </defs>
+
+  <!-- Rectangle with an initial gray shadow -->
+  <rect
+    x="50"
+    y="50"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#drop-shadow-filter)" />
+</svg>
+
+<!-- Button to update the shadow -->
+<button id="updateShadow" type="button">Update Shadow</button>
+```
+
+```js
+// Get the feDropShadow element
+const dropShadow = document.querySelector("feDropShadow");
+
+// Button to trigger the update
+document.getElementById("updateShadow").addEventListener("click", () => {
+  // Change the standard deviation (blur radius) of the shadow
+  dropShadow.setStdDeviation(15, 20);
+});
+```
+
+{{EmbedLiveSample("Examples", "", "240")}}
+
+Click on the red rectangle to update the drop shadow's blur effect.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedLength")}}
diff --git a/files/en-us/web/api/svgfedropshadowelement/stddeviationx/index.md b/files/en-us/web/api/svgfedropshadowelement/stddeviationx/index.md
@@ -0,0 +1,64 @@
+---
+title: "SVGFEDropShadowElement: stdDeviationX property"
+short-title: stdDeviationX
+slug: Web/API/SVGFEDropShadowElement/stdDeviationX
+page-type: web-api-instance-property
+browser-compat: api.SVGFEDropShadowElement.stdDeviationX
+---
+
+{{APIRef("SVG")}}
+
+The **`stdDeviationX`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface reflects the (possibly automatically computed) X component of the {{SVGAttr("stdDeviation")}} attribute of the given {{SVGElement("feDropShadow")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `stdDeviationX` value
+
+In this example, we retrieve the horizontal standard deviation for the blur operation of the `<feDropShadow>` by using the `stdDeviationX` read-only property of the `SVGFEDropShadowElement` interface.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="drop-shadow-filter">
+      <!-- Drop Shadow with stdDeviationY property set to 10 for vertical blur -->
+      <feDropShadow
+        in="SourceGraphic"
+        dx="10"
+        dy="10"
+        stdDeviation="5 10"
+        flood-color="gray" />
+    </filter>
+  </defs>
+
+  <!-- Rectangle with a gray shadow -->
+  <rect
+    x="50"
+    y="50"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#drop-shadow-filter)" />
+</svg>
+```
+
+```js
+const dropShadow = document.querySelector("feDropShadow");
+
+console.log(dropShadow.stdDeviationX.baseVal); // Output: 5
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}