Skip to content

Commit

Permalink
New Pages: SVGFEGaussianBlurElement (#37429)
Browse files Browse the repository at this point in the history
  • Loading branch information
yashrajbharti authored Jan 5, 2025
1 parent d8fdf0f commit d8f5fcc
Show file tree
Hide file tree
Showing 4 changed files with 282 additions and 0 deletions.
78 changes: 78 additions & 0 deletions files/en-us/web/api/svgfegaussianblurelement/in1/index.md
Original file line number Diff line number Diff line change
@@ -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
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gaussian-blur-filter">
<!-- Gaussian blur applied to the SourceGraphic -->
<feGaussianBlur
in="SourceGraphic"
stdDeviation="5"
result="blurred-source" />
<!-- Gaussian blur applied to the BackgroundImage -->
<feGaussianBlur
in="BackgroundImage"
stdDeviation="10"
result="blurred-background" />
</filter>
</defs>

<!-- Rectangle with SourceGraphic blur effect -->
<rect
x="20"
y="20"
width="100"
height="100"
style="fill:rebeccapurple;"
filter="url(#gaussian-blur-filter)" />

<!-- Circle with BackgroundImage blur effect -->
<circle
cx="150"
cy="100"
r="50"
style="fill:hotpink;"
filter="url(#gaussian-blur-filter)" />
</svg>
```

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")}}
Original file line number Diff line number Diff line change
@@ -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
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gaussian-blur-filter">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="5 5"
result="blurred-graphic" />
</filter>
</defs>

<!-- Rectangle with an initial blur effect -->
<rect
x="50"
y="50"
width="100"
height="100"
style="fill:hotpink;"
filter="url(#gaussian-blur-filter)" />
</svg>

<!-- Button to update the blur -->
<button id="updateBlur">Update Blur</button>
```

```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")}}
Original file line number Diff line number Diff line change
@@ -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
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gaussian-blur-filter">
<!-- Apply Gaussian Blur with stdDeviationX set to 5 and stdDeviationY set to 10 -->
<feGaussianBlur
in="SourceGraphic"
stdDeviation="5 10"
result="blurred-graphic" />
</filter>
</defs>

<!-- Rectangle with a Gaussian blur effect -->
<rect
x="50"
y="50"
width="100"
height="100"
style="fill:hotpink;"
filter="url(#gaussian-blur-filter)" />
</svg>
```

```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")}}
Original file line number Diff line number Diff line change
@@ -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
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gaussian-blur-filter">
<!-- Apply Gaussian Blur with stdDeviationY set to 5 and stdDeviationY set to 10 -->
<feGaussianBlur
in="SourceGraphic"
stdDeviation="5 10"
result="blurred-graphic" />
</filter>
</defs>

<!-- Rectangle with a Gaussian blur effect -->
<rect
x="50"
y="50"
width="100"
height="100"
style="fill:hotpink;"
filter="url(#gaussian-blur-filter)" />
</svg>
```

```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")}}

0 comments on commit d8f5fcc

Please sign in to comment.