SVGFEDropShadowElement: 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 January 2020.
The setStdDeviation() method of the SVGFEDropShadowElement 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()
In this example, we set the horizontal and vertical standard deviations for a blur operation for a <feDropShadow> filter shadow effect using the setStdDeviation() method of the SVGFEDropShadowElement interface.
html
<svg height="200" width="200" viewBox="0 0 200 200">
<defs>
<filter id="drop-shadow-filter">
<feDropShadow
in="SourceGraphic"
dx="10"
dy="10"
stdDeviation="5 5"
flood-color="gray" />
</filter>
</defs>
<!-- Rectangle with an initial gray shadow -->
<rect
x="50"
y="50"
width="100"
height="100"
fill="red"
filter="url(#drop-shadow-filter)" />
</svg>
<!-- Button to update the shadow -->
<button id="updateShadow" type="button">Update Shadow</button>
js
// Get the feDropShadow element
const dropShadow = document.querySelector("feDropShadow");
// Button to trigger the update
document.getElementById("updateShadow").addEventListener("click", () => {
// Change the standard deviation (blur radius) of the shadow
dropShadow.setStdDeviation(15, 20);
});
Click on the red rectangle to update the drop shadow's blur effect.
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # dom-svgfedropshadowelement-setstddeviation |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
setStdDeviation
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support