El atributo z en SVG se usa para definir la ubicación a lo largo del eje z en el sistema de coordenadas para una fuente de luz establecida por el atributo de unidades primitivas en el elemento < filtro >.
Suponemos que el eje z positivo sale hacia la persona que ve el contenido y también una unidad a lo largo del eje z es igual a una unidad en x e y. Los dos elementos SVG que usan el atributo z son < fePointLight > y < feSpotLight >.
Sintaxis:
z = "number"
Valores de atributo: este atributo acepta un valor como se mencionó anteriormente y se describe a continuación:
- número: representa un número, que puede ser un número entero o un número con un componente fraccionario.
Los siguientes ejemplos ilustran el uso del atributo z .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="geek1" x="0" y="0" width="50%" height="50%"> <feDiffuseLighting in="SourceGraphic"> <fePointLight x="60" y="60" z="10" /> </feDiffuseLighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#geek1);" /> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="geek2" x="0" y="0" width="50%" height="50%"> <feDiffuseLighting in="SourceGraphic"> <fePointLight x="60" y="60" z="50" /> </feDiffuseLighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#geek2);" /> </svg> </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