SVGFEGaussianBlurElement: setStdDeviation() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The setStdDeviation() method of the SVGFEGaussianBlurElement interface sets the values for the stdDeviation attribute.
Syntax
js
setStdDeviation(x, y)
Parameters
x-
A float representing X component of the
stdDeviationattribute. y-
A float representing Y component of the
stdDeviationattribute.
Return value
None (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"
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
| Specification |
|---|
| Filter Effects Module Level 1 # dom-svgfegaussianblurelement-setstddeviation |
Browser compatibility
Loading…