-
Notifications
You must be signed in to change notification settings - Fork 22.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New Pages: SVGFEGaussianBlurElement (#37429)
- Loading branch information
1 parent
d8fdf0f
commit d8f5fcc
Showing
4 changed files
with
282 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")}} |
80 changes: 80 additions & 0 deletions
80
files/en-us/web/api/svgfegaussianblurelement/setstddeviation/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")}} |
62 changes: 62 additions & 0 deletions
62
files/en-us/web/api/svgfegaussianblurelement/stddeviationx/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")}} |
62 changes: 62 additions & 0 deletions
62
files/en-us/web/api/svgfegaussianblurelement/stddeviationy/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")}} |