<feComponentTransfer>

Базовая поддержка Широко доступно

Эта возможность хорошо зарекомендовала себя и работает на многих устройствах и в браузерах разных версий. Она доступна во всех браузерах с ⁨июля 2015 года⁩.

Примитив фильтра <feComponentTransfer> SVG выполняет переназначение данных для каждого пикселя отдельно для каждого цветового компонента. Он позволяет выполнять такие операции, как настройка яркости, контрастности, цветового баланса или пороговой обработки.

Вычисления выполняются с непредварительно умноженными значениями цвета. Цвета изменяются путём замены каждого канала (R, G, B и A) результатом, возвращаемым дочерними элементами <feFuncR>, <feFuncB>, <feFuncG> и <feFuncA>. Если указано несколько элементов одного типа, используется последний; если элемент для изменения одного из каналов не задан, результат будет таким же, как при задании для этого канала тождественного преобразования.

Как и другие примитивы фильтров, по умолчанию этот элемент обрабатывает цветовые компоненты в цветовом пространстве linearRGB. Чтобы использовать sRGB, можно задать color-interpolation-filters.

Контекст использования

Категории	Элемент — примитив фильтра
Допустимое содержимое	Любое количество следующих элементов в любом порядке: `<feFuncA>`, `<feFuncR>`, `<feFuncB>`, `<feFuncG>`

Атрибуты

in

Интерфейс DOM

Этот элемент реализует интерфейс SVGFEComponentTransferElement.

Пример

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
  <defs>
    <linearGradient
      id="rainbow"
      gradientUnits="userSpaceOnUse"
      x1="0"
      y1="0"
      x2="100%"
      y2="0">
      <stop offset="0" stop-color="red"></stop>
      <stop offset="0.2" stop-color="yellow"></stop>
      <stop offset="0.4" stop-color="lime"></stop>
      <stop offset="0.6" stop-color="cyan"></stop>
      <stop offset="0.8" stop-color="blue"></stop>
      <stop offset="1" stop-color="purple"></stop>
    </linearGradient>
    <filter id="identity" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"></feFuncR>
        <feFuncG type="identity"></feFuncG>
        <feFuncB type="identity"></feFuncB>
        <feFuncA type="identity"></feFuncA>
      </feComponentTransfer>
    </filter>
    <filter id="table" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
        <feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
        <feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
      </feComponentTransfer>
    </filter>
    <filter id="discrete" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 1 1"></feFuncR>
        <feFuncG type="discrete" tableValues="1 1 0 0"></feFuncG>
        <feFuncB type="discrete" tableValues="0 1 1 0"></feFuncB>
      </feComponentTransfer>
    </filter>
    <filter id="linear" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
        <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
        <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
      </feComponentTransfer>
    </filter>
    <filter id="gamma" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR>
        <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG>
        <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <g font-weight="bold">
    <text x="0" y="20">Default</text>
    <rect x="0" y="30" width="100%" height="20"></rect>
    <text x="0" y="70">Identity</text>
    <rect x="0" y="80" width="100%" height="20" filter="url(#identity)"></rect>
    <text x="0" y="120">Table lookup</text>
    <rect x="0" y="130" width="100%" height="20" filter="url(#table)"></rect>
    <text x="0" y="170">Discrete table lookup</text>
    <rect x="0" y="180" width="100%" height="20" filter="url(#discrete)"></rect>
    <text x="0" y="220">Linear function</text>
    <rect x="0" y="230" width="100%" height="20" filter="url(#linear)"></rect>
    <text x="0" y="270">Gamma function</text>
    <rect x="0" y="280" width="100%" height="20" filter="url(#gamma)"></rect>
  </g>
</svg>

CSS

rect {
  fill: url("#rainbow");
}

Результат

Спецификации

Спецификация
Модуль эффектов фильтров уровня 1> # feComponentTransferElement>

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`feComponentTransfer`	5	12	3	15	6	18	4	14	6	1.0	4.4	6
`in`	5	12	3	15	6	18	4	14	6	1.0	4.4	6

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComponentTransfer