diff --git a/files/en-us/web/api/svgfedropshadowelement/dx/index.md b/files/en-us/web/api/svgfedropshadowelement/dx/index.md new file mode 100644 index 000000000000000..e0db9fd4ba13f6b --- /dev/null +++ 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 `` by using the `dx` read-only property of the `SVGFEDropShadowElement` interface. + +```html + + + + + + + + + + + + + + +``` + +```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 new file mode 100644 index 000000000000000..f77f59ec8165f7d --- /dev/null +++ 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 `` by using the `dx` read-only property of the `SVGFEDropShadowElement` interface. + +```html + + + + + + + + + + + + + + +``` + +```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 new file mode 100644 index 000000000000000..3764ba38177d624 --- /dev/null +++ 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 + + + + + + + + + + + + + + +``` + +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 index 5b5f9d7db1af1d5..280ef850af50b31 100644 --- 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 new file mode 100644 index 000000000000000..e42ba5fba5186a8 --- /dev/null +++ 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 `` filter shadow effect using the `setStdDeviation()` method of the `SVGFEDropShadowElement` interface. + +```html + + + + + + + + + + + + + +``` + +```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 new file mode 100644 index 000000000000000..2d04724e9bb8ab3 --- /dev/null +++ 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 `` by using the `stdDeviationX` read-only property of the `SVGFEDropShadowElement` interface. + +```html + + + + + + + + + + + +``` + +```js +const dropShadow = document.querySelector("feDropShadow"); + +console.log(dropShadow.stdDeviationX.baseVal); // Output: 5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfedropshadowelement/stddeviationy/index.md b/files/en-us/web/api/svgfedropshadowelement/stddeviationy/index.md new file mode 100644 index 000000000000000..1f47d6bb695d76c --- /dev/null +++ b/files/en-us/web/api/svgfedropshadowelement/stddeviationy/index.md @@ -0,0 +1,64 @@ +--- +title: "SVGFEDropShadowElement: stdDeviationY property" +short-title: stdDeviationY +slug: Web/API/SVGFEDropShadowElement/stdDeviationY +page-type: web-api-instance-property +browser-compat: api.SVGFEDropShadowElement.stdDeviationY +--- + +{{APIRef("SVG")}} + +The **`stdDeviationY`** read-only property of the {{domxref("SVGFEDropShadowElement")}} interface reflects the (possibly automatically computed) Y component of the {{SVGAttr("stdDeviation")}} attribute of the given {{SVGElement("feDropShadow")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `stdDeviationY` value + +In this example, we retrieve the vertical standard deviation for the blur operation of the `` by using the `stdDeviationY` read-only property of the `SVGFEDropShadowElement` interface. + +```html + + + + + + + + + + + +``` + +```js +const dropShadow = document.querySelector("feDropShadow"); + +console.log(dropShadow.stdDeviationY.baseVal); // Output: 10 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}}