Атрибут 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" 
          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>

Выход:

Example 2:

<!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>

Выход:

HTML

Атрибут SVG tableValues

РЕКОМЕНДУЕМЫЕ СТАТЬИ