The elevation attribute specifies the direction angle for the light source from the XY plane towards the Z-axis, in degrees. Note that the positive Z-axis points towards the viewer of the content.

You can use this attribute with the following SVG elements:


<svg viewBox="0 0 440 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="distantLight1">
      <feDistantLight elevation="0" />
  <filter id="distantLight2">
      <feDistantLight elevation="45" />

  <circle cx="100" cy="100" r="80" style="filter: url(#distantLight1);" />
  <circle cx="100" cy="100" r="80" style="filter: url(#distantLight2); transform: translateX(240px);" />

Usage notes

Value <number>
Default value 0
Animatable Yes


Filter Effects Module Level 2
# element-attrdef-fedistantlight-elevation

Browser compatibility

BCD tables only load in the browser