The feSpecularLighting SVG element specifies lighting a source graphic using the alpha channel as a bump map.
The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Blinn-Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction.
Specifies the input for the filter primitive.
If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result) Specifies ks in the Phong lighting model.
This can be any non-negative number.
Specifies the exponent for specular term, larger is more "shiny".
Specifies the height of the surface.
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="BackgroundImage">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="FillPaint">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting result="myresult">
<fePointLight z="10"/>
</feSpecularLighting>
<feSpecularLighting in="myresult">
<fePointLight z="100"/>
</feSpecularLighting>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="SourceAlpha">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="SourceGraphic">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="StrokePaint">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting lighting-color="red" specularConstant="0.5">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting lighting-color="red" specularExponent="10">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting lighting-color="red" surfaceScale="50">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>