Skip to content

Commit d8f5fcc

Browse files
yashrajbhartiyashrajbharti
authored
New Pages: SVGFEGaussianBlurElement (#37429)
1 parent d8fdf0f commit d8f5fcc

File tree

4 files changed

+282
-0
lines changed

4 files changed

+282
-0
lines changed

‎files/en-us/web/api/svgfegaussianblurelement/in1/index.md

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: "SVGFEGaussianBlurElement: in1 property"
3+
short-title: in1
4+
slug: Web/API/SVGFEGaussianBlurElement/in1
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGFEGaussianBlurElement.in1
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
The **`in1`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feGaussianBlur")}} element.
12+
13+
## Value
14+
15+
An {{domxref("SVGAnimatedString")}} object.
16+
17+
## Examples
18+
19+
In this example, two {{SVGElement("feGaussianBlur")}} elements are defined in a filter, each with a different `in` attribute.
20+
21+
```html
22+
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
23+
<defs>
24+
<filter id="gaussian-blur-filter">
25+
<!-- Gaussian blur applied to the SourceGraphic -->
26+
<feGaussianBlur
27+
in="SourceGraphic"
28+
stdDeviation="5"
29+
result="blurred-source" />
30+
<!-- Gaussian blur applied to the BackgroundImage -->
31+
<feGaussianBlur
32+
in="BackgroundImage"
33+
stdDeviation="10"
34+
result="blurred-background" />
35+
</filter>
36+
</defs>
37+
38+
<!-- Rectangle with SourceGraphic blur effect -->
39+
<rect
40+
x="20"
41+
y="20"
42+
width="100"
43+
height="100"
44+
style="fill:rebeccapurple;"
45+
filter="url(#gaussian-blur-filter)" />
46+
47+
<!-- Circle with BackgroundImage blur effect -->
48+
<circle
49+
cx="150"
50+
cy="100"
51+
r="50"
52+
style="fill:hotpink;"
53+
filter="url(#gaussian-blur-filter)" />
54+
</svg>
55+
```
56+
57+
We can access the `in` attribute:
58+
59+
```js
60+
// Get all feGaussianBlur elements
61+
const gaussianBlurs = document.querySelectorAll("feGaussianBlur");
62+
63+
// Access the 'in' attribute values
64+
console.log(gaussianBlurs[0].in1.baseVal); // Output: "SourceGraphic"
65+
console.log(gaussianBlurs[1].in1.baseVal); // Output: "BackgroundImage"
66+
```
67+
68+
## Specifications
69+
70+
{{Specifications}}
71+
72+
## Browser compatibility
73+
74+
{{Compat}}
75+
76+
## See also
77+
78+
- {{domxref("SVGAnimatedString")}}

‎files/en-us/web/api/svgfegaussianblurelement/setstddeviation/index.md

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
title: "SVGFEGaussianBlurElement: setStdDeviation() method"
3+
short-title: setStdDeviation()
4+
slug: Web/API/SVGFEGaussianBlurElement/setStdDeviation
5+
page-type: web-api-instance-method
6+
browser-compat: api.SVGFEGaussianBlurElement.setStdDeviation
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
The `setStdDeviation()` method of the {{domxref("SVGFEGaussianBlurElement")}} interface sets the values for the {{SVGAttr("stdDeviation")}} attribute.
12+
13+
## Syntax
14+
15+
```js-nolint
16+
SVGFEGaussianBlurElement.setStdDeviation(x, y)
17+
```
18+
19+
### Parameters
20+
21+
- `x`
22+
- : A float representing X component of the {{SVGAttr("stdDeviation")}} attribute.
23+
- `y`
24+
- : A float representing Y component of the {{SVGAttr("stdDeviation")}} attribute.
25+
26+
### Return value
27+
28+
None ({{jsxref('undefined')}}).
29+
30+
## Examples
31+
32+
### Using `setStdDeviation()`
33+
34+
```html
35+
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
36+
<defs>
37+
<filter id="gaussian-blur-filter">
38+
<feGaussianBlur
39+
in="SourceGraphic"
40+
stdDeviation="5 5"
41+
result="blurred-graphic" />
42+
</filter>
43+
</defs>
44+
45+
<!-- Rectangle with an initial blur effect -->
46+
<rect
47+
x="50"
48+
y="50"
49+
width="100"
50+
height="100"
51+
style="fill:hotpink;"
52+
filter="url(#gaussian-blur-filter)" />
53+
</svg>
54+
55+
<!-- Button to update the blur -->
56+
<button id="updateBlur">Update Blur</button>
57+
```
58+
59+
```js
60+
// Get the feGaussianBlur element
61+
const gaussianBlur = document.querySelector("feGaussianBlur");
62+
63+
// Button to trigger the update
64+
document.getElementById("updateBlur").addEventListener("click", () => {
65+
// Change the standard deviation (blur radius) of the blur effect
66+
gaussianBlur.setStdDeviation(15, 20); // Update to X: 15, Y: 20
67+
});
68+
```
69+
70+
## Specifications
71+
72+
{{Specifications}}
73+
74+
## Browser compatibility
75+
76+
{{Compat}}
77+
78+
## See also
79+
80+
- {{domxref("SVGAnimatedLength")}}

‎files/en-us/web/api/svgfegaussianblurelement/stddeviationx/index.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: "SVGFEGaussianBlurElement: stdDeviationX property"
3+
short-title: stdDeviationX
4+
slug: Web/API/SVGFEGaussianBlurElement/stdDeviationX
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGFEGaussianBlurElement.stdDeviationX
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
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.
12+
13+
## Value
14+
15+
An {{domxref("SVGAnimatedNumber")}} object.
16+
17+
## Examples
18+
19+
### Accessing the `stdDeviationX` attribute
20+
21+
```html
22+
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
23+
<defs>
24+
<filter id="gaussian-blur-filter">
25+
<!-- Apply Gaussian Blur with stdDeviationX set to 5 and stdDeviationY set to 10 -->
26+
<feGaussianBlur
27+
in="SourceGraphic"
28+
stdDeviation="5 10"
29+
result="blurred-graphic" />
30+
</filter>
31+
</defs>
32+
33+
<!-- Rectangle with a Gaussian blur effect -->
34+
<rect
35+
x="50"
36+
y="50"
37+
width="100"
38+
height="100"
39+
style="fill:hotpink;"
40+
filter="url(#gaussian-blur-filter)" />
41+
</svg>
42+
```
43+
44+
```js
45+
// Select the feGaussianBlur element
46+
const gaussianBlur = document.querySelector("feGaussianBlur");
47+
48+
// Access the stdDeviationX value
49+
console.log(gaussianBlur.stdDeviationX.baseVal); // Output: 5
50+
```
51+
52+
## Specifications
53+
54+
{{Specifications}}
55+
56+
## Browser compatibility
57+
58+
{{Compat}}
59+
60+
## See also
61+
62+
- {{domxref("SVGAnimatedNumber")}}

‎files/en-us/web/api/svgfegaussianblurelement/stddeviationy/index.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: "SVGFEGaussianBlurElement: stdDeviationY property"
3+
short-title: stdDeviationY
4+
slug: Web/API/SVGFEGaussianBlurElement/stdDeviationY
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGFEGaussianBlurElement.stdDeviationY
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
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.
12+
13+
## Value
14+
15+
An {{domxref("SVGAnimatedNumber")}} object.
16+
17+
## Examples
18+
19+
### Accessing the `stdDeviationY` attribute
20+
21+
```html
22+
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
23+
<defs>
24+
<filter id="gaussian-blur-filter">
25+
<!-- Apply Gaussian Blur with stdDeviationY set to 5 and stdDeviationY set to 10 -->
26+
<feGaussianBlur
27+
in="SourceGraphic"
28+
stdDeviation="5 10"
29+
result="blurred-graphic" />
30+
</filter>
31+
</defs>
32+
33+
<!-- Rectangle with a Gaussian blur effect -->
34+
<rect
35+
x="50"
36+
y="50"
37+
width="100"
38+
height="100"
39+
style="fill:hotpink;"
40+
filter="url(#gaussian-blur-filter)" />
41+
</svg>
42+
```
43+
44+
```js
45+
// Select the feGaussianBlur element
46+
const gaussianBlur = document.querySelector("feGaussianBlur");
47+
48+
// Access the stdDeviationY value
49+
console.log(gaussianBlur.stdDeviationY.baseVal); // Output: 10
50+
```
51+
52+
## Specifications
53+
54+
{{Specifications}}
55+
56+
## Browser compatibility
57+
58+
{{Compat}}
59+
60+
## See also
61+
62+
- {{domxref("SVGAnimatedNumber")}}

0 commit comments

Comments
 (0)