diff --git a/files/en-us/web/api/svgfegaussianblurelement/in1/index.md b/files/en-us/web/api/svgfegaussianblurelement/in1/index.md new file mode 100644 index 000000000000000..1da29a77fef9528 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/in1/index.md @@ -0,0 +1,78 @@ +--- +title: "SVGFEGaussianBlurElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEGaussianBlurElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feGaussianBlur")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +In this example, two {{SVGElement("feGaussianBlur")}} elements are defined in a filter, each with a different `in` attribute. + +```html + + + + + + + + + + + + + + + + +``` + +We can access the `in` attribute: + +```js +// Get all feGaussianBlur elements +const gaussianBlurs = document.querySelectorAll("feGaussianBlur"); + +// Access the 'in' attribute values +console.log(gaussianBlurs[0].in1.baseVal); // Output: "SourceGraphic" +console.log(gaussianBlurs[1].in1.baseVal); // Output: "BackgroundImage" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfegaussianblurelement/setstddeviation/index.md b/files/en-us/web/api/svgfegaussianblurelement/setstddeviation/index.md new file mode 100644 index 000000000000000..81d619b5e7120d5 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/setstddeviation/index.md @@ -0,0 +1,80 @@ +--- +title: "SVGFEGaussianBlurElement: setStdDeviation() method" +short-title: setStdDeviation() +slug: Web/API/SVGFEGaussianBlurElement/setStdDeviation +page-type: web-api-instance-method +browser-compat: api.SVGFEGaussianBlurElement.setStdDeviation +--- + +{{APIRef("SVG")}} + +The `setStdDeviation()` method of the {{domxref("SVGFEGaussianBlurElement")}} interface sets the values for the {{SVGAttr("stdDeviation")}} attribute. + +## Syntax + +```js-nolint +SVGFEGaussianBlurElement.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()` + +```html + + + + + + + + + + + + + +``` + +```js +// Get the feGaussianBlur element +const gaussianBlur = document.querySelector("feGaussianBlur"); + +// Button to trigger the update +document.getElementById("updateBlur").addEventListener("click", () => { + // Change the standard deviation (blur radius) of the blur effect + gaussianBlur.setStdDeviation(15, 20); // Update to X: 15, Y: 20 +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedLength")}} diff --git a/files/en-us/web/api/svgfegaussianblurelement/stddeviationx/index.md b/files/en-us/web/api/svgfegaussianblurelement/stddeviationx/index.md new file mode 100644 index 000000000000000..307f172de1b5b17 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/stddeviationx/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGFEGaussianBlurElement: stdDeviationX property" +short-title: stdDeviationX +slug: Web/API/SVGFEGaussianBlurElement/stdDeviationX +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.stdDeviationX +--- + +{{APIRef("SVG")}} + +The **`stdDeviationX`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the (possibly automatically computed) X component of the {{SVGAttr("stdDeviation")}} attribute of the given {{SVGElement("feGaussianBlur")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `stdDeviationX` attribute + +```html + + + + + + + + + + + +``` + +```js +// Select the feGaussianBlur element +const gaussianBlur = document.querySelector("feGaussianBlur"); + +// Access the stdDeviationX value +console.log(gaussianBlur.stdDeviationX.baseVal); // Output: 5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfegaussianblurelement/stddeviationy/index.md b/files/en-us/web/api/svgfegaussianblurelement/stddeviationy/index.md new file mode 100644 index 000000000000000..c0a50d43b9c1799 --- /dev/null +++ b/files/en-us/web/api/svgfegaussianblurelement/stddeviationy/index.md @@ -0,0 +1,62 @@ +--- +title: "SVGFEGaussianBlurElement: stdDeviationY property" +short-title: stdDeviationY +slug: Web/API/SVGFEGaussianBlurElement/stdDeviationY +page-type: web-api-instance-property +browser-compat: api.SVGFEGaussianBlurElement.stdDeviationY +--- + +{{APIRef("SVG")}} + +The **`stdDeviationY`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the (possibly automatically computed) Y component of the {{SVGAttr("stdDeviation")}} attribute of the given {{SVGElement("feGaussianBlur")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `stdDeviationY` attribute + +```html + + + + + + + + + + + +``` + +```js +// Select the feGaussianBlur element +const gaussianBlur = document.querySelector("feGaussianBlur"); + +// Access the stdDeviationY value +console.log(gaussianBlur.stdDeviationY.baseVal); // Output: 10 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}}