Attributes
Vachmi
The <feDistantLight> filter primitive defines a distant light source that can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.
Attribute
Description
azimuth
Specifies the direction angle for the light source on the XY plane (clockwise), in degrees from the x axis.
elevation
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.
Here is the SVG code to draw this filter.
Image with feDistantLight filter
<svg id='circle1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'>
<filter id="distantLight-Ex1">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<feDistantLight azimuth="160" elevation="20" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="1" k3="1" k4="0"/>
</filter>
<image xlink:href="../images/background1.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#distantLight-Ex1);"/>
</svg>
<filter id="distantLight-Ex1">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<feDistantLight azimuth="160" elevation="20" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="1" k3="1" k4="0"/>
</filter>
<image xlink:href="../images/background1.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#distantLight-Ex1);"/>
</svg>