<fePointLight>
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 <fePointLight> SVG filter primitive defines a light source which allows to create a point light effect. It that can be used within a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>.
Like other filter primitives, it handles color components in the linearRGB color space by default. You can use color-interpolation-filters to use sRGB instead.
Usage context
Attributes
DOM Interface
This element implements the SVGFEPointLightElement interface.
Example
SVG
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="80" lighting-color="white"> <fePointLight x="50" y="50" z="220" /> </feSpecularLighting> <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic" 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 # fePointLightElement |
Browser compatibility
Loading…