SVG FEDropShadow.stdDeviationX Property

The FE in FEDropShadow stands for the "Filter Effects" element in SVG (Scalable Vector Graphics). The stdDeviationX attribute controls the horizontal blur radius of the shadow created by the FEDropShadow element.

Syntax

<feDropShadow stdDeviationX="value" />

Values

• value: A number that specifies the horizontal blur radius of the shadow. The default value is 0.

Example

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100"
    style="filter: url(#drop-shadow);" />
  <filter id="drop-shadow">
    <feDropShadow stdDeviationX="5" />
  </filter>
</svg>

In this example, the feDropShadow element is used inside a filter element with an id of drop-shadow. The stdDeviationX attribute is set to 5. This creates a drop shadow with a horizontal blur radius of 5 pixels for a rect element with a width of 100 pixels.

Notes

• The stdDeviationX and stdDeviationY attributes work together to control the size and position of the shadow.
• If the stdDeviationX value is smaller than the stdDeviationY value, the shadow will be more vertical.
• If the stdDeviationX value is larger than the stdDeviationY value, the shadow will be more horizontal.
• If only one of the stdDeviationX or stdDeviationY attributes is specified, the other value will be set to the same value.

Conclusion

The stdDeviationX attribute of the FEDropShadow element in SVG controls the horizontal blur radius of the drop shadow created by the element. By setting this attribute, you can customize the size and position of the shadow to suit your needs.