Attributes
Vachmi
The <feSpotLight> filter primitive defines a light source which allows to create a spotlight effect.
It can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.
Attribute
Description
x
Defines a x-axis coordinate in the user coordinate system.
y
Defines a y-axis coordinate in the user coordinate system.
z
Defines a z-axis coordinate in the user coordinate system.
pointsAtX
Represents the x location in the coordinate system established by attribute primitiveUnits
on the filter element of the point at which the light source is pointing.
pointsAtY
Represents the y location in the coordinate system established by attribute primitiveUnits
on the filter element of the point at which the light source is pointing.
pointsAtZ
Represents the z location in the coordinate system established by attribute primitiveUnits
on the filter element of the point at which the light source is pointing.
specularExponent
Controls the focus for the light source. The bigger the value the brighter the light.
limitingConeAngle
Represents the angle in degrees between the spot light axis
(i.e. the axis between the light source and the point to which it is pointing at) and the spot light cone.
So it defines a limiting cone which restricts the region where the light is projected.
No light is projected outside the cone.
No light is projected outside the cone.
Here is the SVG code to draw this filter.
Image with feSpotLight filter Example 1
<svg id='rect1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'>
<filter id="spotLight-Ex1">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="green">
<feSpotLight x="20" y="80" z="30" pointsAtX="30" pointsAtY="20" limitingConeAngle="20" />
</feDiffuseLighting>
</filter>
<image xlink:href="../images/background1.png" x="10%" y="10%" width="100%" height="100%" style="filter:url(#spotLight-Ex1);"/>
</svg>
<filter id="spotLight-Ex1">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="green">
<feSpotLight x="20" y="80" z="30" pointsAtX="30" pointsAtY="20" limitingConeAngle="20" />
</feDiffuseLighting>
</filter>
<image xlink:href="../images/background1.png" x="10%" y="10%" width="100%" height="100%" style="filter:url(#spotLight-Ex1);"/>
</svg>
Image with feSpotLight filter Example 2
<svg id='rect2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'>
<filter id="spotLight-Ex2">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="red">
<feSpotLight x="5" y="5" z="5" pointsAtX="25" pointsAtY="25" specularExponent="10" limitingConeAngle="10" />
</feDiffuseLighting>
</filter>
<image xlink:href="../images/background1.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotLight-Ex2);"/>
</svg>
<filter id="spotLight-Ex2">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="red">
<feSpotLight x="5" y="5" z="5" pointsAtX="25" pointsAtY="25" specularExponent="10" limitingConeAngle="10" />
</feDiffuseLighting>
</filter>
<image xlink:href="../images/background1.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotLight-Ex2);"/>
</svg>