El atributo pointsAtZ denota la posición y en el sistema de coordenadas establecido por el atributo primitiveUnits en el elemento <filter> del punto al que apunta la fuente de luz.
El elemento que está usando este atributo:
- elemento <feSpotLight>
Sintaxis:
pointsAtZ = number
Valores de atributo: el atributo pointsAtZ acepta los valores mencionados anteriormente y descritos a continuación
- número: Es un valor numérico que se refiere a las unidades del sistema de coordenadas actual. Su valor por defecto es 0.
Los siguientes ejemplos ilustran el uso del atributo pointsAtZ
Ejemplo 1: En este ejemplo, el punto se establece en 0.
HTML
<!DOCTYPE html> <html> <body> <div style="color: green;"> <h1> GeeksforGeeks </h1> <svg viewBox="0 0 1120 200" xmlns="http://www.w3.org/2000/svg"> <filter id="Geek1" width="100%" height="100%"> <feDiffuseLighting in="SourceGraphic"> <feSpotLight x="120" y="120" z="50" pointsAtZ="0"/> </feDiffuseLighting> </filter> <rect width="200" height="250" style="filter: url(#Geek1);"/> </svg> </div> </body> </html>
Producción:
Ejemplo 2: el punto se establece en 200 en este ejemplo
HTML
<!DOCTYPE html> <html> <body> <div style="color: green;"> <h1> GeeksforGeeks </h1> <svg viewBox="0 0 1120 200" xmlns="http://www.w3.org/2000/svg"> <filter id="Geek2" width="100%" height="100%"> <feDiffuseLighting in="SourceGraphic"> <feSpotLight x="120" y="120" z="50" pointsAtZ="200"/> </feDiffuseLighting> </filter> <rect width="200" height="250" style="filter: url(#Geek2);"/> </svg> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA