La primitiva de filtro SVG <feSpecularLighting> ilumina un gráfico fuente utilizando el canal alfa como un mapa de relieve.
Sintaxis:
<feSpecularLighting in ="" surfaceScale ="" specularConstant="" specularExponent="" kernelUnitLength="" >
Atributos:
- in: identifica la entrada para la primitiva de filtro dada.
- surfaceScale: Representa la altura de la superficie para una primitiva de filtro de luz.
- specularConstant: Controla el ratio de reflexión de la iluminación especular.
- specularExponent: Controla el foco de la fuente de luz.
- kernelUnitLength: tiene dos significados según el contexto en el que se usa. Para las primitivas de filtro de iluminación, indica la distancia prevista para las coordenadas x e y, para <feConvolveMatrix>, indica la distancia prevista entre columnas y filas sucesivas en la array del núcleo .
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por epistler_999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA