SVGFEDistantLightElement: elevation property
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.
Please take two minutes to fill out our short survey.
The elevation
read-only property of the SVGFEDistantLightElement
interface reflects the elevation
attribute of the given <feDistantLight>
element.
Value
An SVGAnimatedNumber
object.
Examples
Accessing the elevation
Property
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="lightingFilter">
<feDistantLight azimuth="45" elevation="30" />
<feDiffuseLighting result="light" lighting-color="white" surfaceScale="2">
<feDistantLight azimuth="45" elevation="30" />
</feDiffuseLighting>
</filter>
</defs>
<rect
x="50"
y="50"
width="100"
height="100"
style="fill:yellow;"
filter="url(#lightingFilter)" />
</svg>
js
const distantLight = document.querySelector("feDistantLight");
console.log(distantLight.elevation.baseVal); // Output: 30
Specifications
Specification |
---|
Filter Effects Module Level 1 # dom-svgfedistantlightelement-elevation |