The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map.
Syntax:
<feSpecularLighting in ="" surfaceScale ="" specularConstant="" specularExponent="" kernelUnitLength="" >
Attributes:
- in: It identifies input for the given filter primitive.
- surfaceScale: It represents the height of the surface for a light filter primitive.
- specularConstant: It controls the ratio of reflection of the specular lighting.
- specularExponent: It controls the focus for the light source.
- kernelUnitLength: It has two meanings based on the context it’s used in. For lighting filter primitives, it indicates the intended distance for the x and y coordinates, for <feConvolveMatrix>, it indicates the intended distance between successive columns and rows in the kernel matrix.
Example 1:
HTML
<!DOCTYPE html> <html>
<body>
<svg height="200" width="200">
<filter id="filter">
<feSpecularLighting specularExponent="5"
lighting-color="gold" result="light">
<fePointLight x="100" y="100" z="100" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" />
</filter>
<rect x="1" y="1" width="200" height="200" style="stroke: #000000; fill: green;
filter: url(#filter);" />
<rect x="50" y="50" width="100" height="100" style="stroke: #000000; fill: green;
filter: url(#filter);" />
<g fill="#FFFFFF" stroke="black" font-size="10" font-family="Verdana">
<text x="60" y="100">GeeksForGeeks</text>
</svg>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<body>
<svg height="200" width="200" viewBox="0 0 220 220">
<filter id="filter">
<feSpecularLighting specularExponent="2"
lighting-color="shadow" result="light">
<fePointLight x="200" y="200" z="100" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
</filter>
<rect x="40" y="40" width="200" height="200" style="stroke: black; fill: green;
filter: url(#filter);" />
<circle cx="130" cy="130" r="50" style=
"fill: black; filter:url(#filter)" />
</svg>
</body>
</html>
|
Output:
Example 3:
HTML
<!DOCTYPE html> <html>
<body>
<svg height="200" width="200" viewBox="0 0 220 220">
<filter id="filter">
<feSpecularLighting in="BackgroundImage"
specularConstant="0.8" surfaceScale="1"
specularExponent="20" kernelUnitLength="1"
lighting-color="red">
<fePointLight x="100" y="100" z="220" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut"
operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
</filter>
<rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: lightgreen;
filter: url(#filter);" />
</svg>
</body>
</html>
|
Output: