SVGFEComponentTransferElement: in1-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die schreibgeschützte in1-Eigenschaft der SVGFEComponentTransferElement-Schnittstelle spiegelt das in-Attribut des angegebenen <feComponentTransfer>-Elements wider.

Wert

Ein SVGAnimatedString-Objekt.

Beispiele

In diesem Beispiel werden zwei <feComponentTransfer>-Elemente in einem Filter definiert, jeweils mit einem unterschiedlichen in-Attribut.

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="filter1">
    <feComponentTransfer in="SourceGraphic">
      <feFuncR type="table" tableValues="0 1" />
    </feComponentTransfer>
    <feComponentTransfer in="BackgroundImage">
      <feFuncR type="table" tableValues="0.5 1" />
    </feComponentTransfer>
  </filter>
  <rect
    x="20"
    y="20"
    width="100"
    height="100"
    style="fill:red;"
    filter="url(#filter1)" />
  <circle cx="100" cy="100" r="50" style="fill:blue;" filter="url(#filter1)" />
</svg>

Wir können auf das in-Attribut zugreifen:

const componentTransfers = document.querySelectorAll("feComponentTransfer");

console.log(componentTransfers[0].in1.baseVal); // Output: "SourceGraphic"
console.log(componentTransfers[1].in1.baseVal); // Output: "BackgroundImage"

Spezifikationen

Specification
Filter Effects Module Level 1 # dom-svgfecomponenttransferelement-in1

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

SVGAnimatedString