Атрибут SVG tableValues
Опубликовано: 25 Февраля, 2022
Атрибут tableValues объявляет список чисел. Эти числа определяют таблицу значений для передаточной функции цветового компонента. К элементам, использующим этот атрибут, относятся: <feFuncA>, <feFuncB>, <feFuncG> и <feFuncR>.
Синтаксис:
tableValues = "список номеров"
Значения атрибутов: атрибут tableValues принимает значения, упомянутые выше и описанные ниже.
- list-of-numbers: он содержит разделенный запятыми или / или разделенный пробелами список номеров / чисел, который объявляет таблицу поиска для функции передачи компонентов цвета. Каждое число может быть от 0 до 1.
Примеры ниже иллюстрируют использование атрибута tableValues.
Example 1:
<!DOCTYPE html> < html > < body > < h1 style="color: green; font-size: 25px; margin-left: 15px;"> GeeksforGeeks </ h1 > < svg viewBox = "0 0 1020 200" < 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 > |
Выход:
Example 2:
<!DOCTYPE html> < html > < body > < h1 style="color: green; font-size: 25px; margin-left: 15px;"> GeeksforGeeks </ h1 > < svg viewBox = "0 0 1020 200" < 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 > |
Выход: