<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

Categories	Light source element
Permitted content	Any number of the following elements, in any order: `<animate>`,`<set>`

Attributes

DOM Interface

This element implements theSVGFESpotLightElement 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>      <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>