<feSpotLight>
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.
The <feSpotLight> SVG element defines a light source that can be used to create a spotlight effect. It is used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.
Usage context
Attributes
DOM Interface
This element implements the SVGFESpotLightElement interface.
Example
HTML
html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feSpecularLighting result="spotlight" specularConstant="1.5" specularExponent="4" lighting-color="white"> <feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" /> </feSpecularLighting> <feComposite in="SourceGraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0" /> </filter> </defs> <image href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" filter="url(#spotlight)" /> </svg> Result
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # feSpotLightElement |