El atributo tableValues declara una lista de números. Estos números definen una tabla de búsqueda de valores para una función de transferencia de componente de color. Los elementos que utilizan este atributo incluyen: <feFuncA>, <feFuncB>, <feFuncG> y <feFuncR>.
Sintaxis:
tableValues = "list-of-numbers"
Valores de atributo: el atributo tableValues acepta los valores mencionados anteriormente y descritos a continuación
- lista de números: contiene una lista de números separados por comas o espacios, que declara una tabla de búsqueda para la función de transferencia del componente de color. Cada número puede estar entre 0 y 1.
Los siguientes ejemplos ilustran el uso del atributo tableValues .
Ejemplo 1:
html
<!DOCTYPE html> <html> <body> <h1 style="color: green; font-size: 25px; margin-left: 15px;"> GeeksforGeeks </h1> <svg viewBox="0 0 1020 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="green"/> <stop offset="0.5" stop-color="#cacfbc"/> <stop offset="1" stop-color="#d0d957"/> </linearGradient> </defs> <filter id="geek1" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="0 1"/> <feFuncG type="table" tableValues="0 1"/> <feFuncB type="table" tableValues="0 1"/> </feComponentTransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#geek1);"/> </svg> </body> </html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html> <html> <body> <h1 style="color: green; font-size: 25px; margin-left: 15px;"> GeeksforGeeks </h1> <svg viewBox="0 0 1020 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#2de00d"/> <stop offset="0.5" stop-color="#c5e4e6"/> <stop offset="1" stop-color="#cf7281"/> </linearGradient> </defs> <filter id="geek2" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="1 0"/> <feFuncG type="table" tableValues="1 0"/> <feFuncB type="table" tableValues="1 0"/> </feComponentTransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" 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