<feComponentTransfer>

Das <feComponentTransfer> SVG Filter-Primitive führt eine Farbkomponentenweise Neuabbildung der Daten für jedes Pixel durch. Es ermöglicht Operationen wie Helligkeitsanpassung, Kontrasteinstellung, Farbkorrektur oder Schwellenwertanpassung.

Die Berechnungen werden an nicht-vormultiplizierten Farbwerten durchgeführt. Die Farben werden geändert, indem jeder Kanal (R, G, B und A) in das Ergebnis dessen geändert wird, was die Kinder <feFuncR>, <feFuncB>, <feFuncG> und <feFuncA> zurückgeben. Wenn mehr als ein gleiches Element bereitgestellt wird, wird das zuletzt angegebene verwendet. Wenn für einen der Kanäle kein Element bereitgestellt wird, entspricht die Wirkung der Angabe einer Identitätstransformation für diesen Kanal.

Wie andere Filter-Primitives verarbeitet es Farbkomponenten standardmäßig im linearRGB Farbraum. Sie können color-interpolation-filters verwenden, um stattdessen sRGB zu nutzen.

Verwendungskontext

KategorienPrimitives Filterelement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
<feFuncA>, <feFuncR>, <feFuncB>, <feFuncG>

Attribute

DOM-Schnittstelle

Dieses Element implementiert die SVGFEComponentTransferElement Schnittstelle.

Beispiel

SVG

html
<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="#ff0000"></stop>
      <stop offset="0.2" stop-color="#ffff00"></stop>
      <stop offset="0.4" stop-color="#00ff00"></stop>
      <stop offset="0.6" stop-color="#00ffff"></stop>
      <stop offset="0.8" stop-color="#0000ff"></stop>
      <stop offset="1" stop-color="#800080"></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"
      style="filter:url(#identity)"></rect>
    <text x="0" y="120">Table lookup</text>
    <rect
      x="0"
      y="130"
      width="100%"
      height="20"
      style="filter:url(#table)"></rect>
    <text x="0" y="170">Discrete table lookup</text>
    <rect
      x="0"
      y="180"
      width="100%"
      height="20"
      style="filter:url(#discrete)"></rect>
    <text x="0" y="220">Linear function</text>
    <rect
      x="0"
      y="230"
      width="100%"
      height="20"
      style="filter:url(#linear)"></rect>
    <text x="0" y="270">Gamma function</text>
    <rect
      x="0"
      y="280"
      width="100%"
      height="20"
      style="filter:url(#gamma)"></rect>
  </g>
</svg>

CSS

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

Ergebnis

Spezifikationen

No specification found

No specification data found for undefined.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität

Siehe auch