SVGFEBlendElement: in2-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 in2-Eigenschaft des SVGFEBlendElement-Interfaces spiegelt das in2-Attribut des gegebenen Elements wider.

Wert

Ein SVGAnimatedString-Objekt.

Beispiele

In diesem Beispiel sind zwei <feBlend>-Elemente in einem Filter definiert, jedes mit einem anderen in2-Attribut.

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="blend-filter">
    <feBlend in="SourceGraphic" in2="SourceAlpha" operator="over" />
    <feBlend in="SourceGraphic" in2="BackgroundImage" operator="in" />
  </filter>
  <rect
    x="20"
    y="20"
    width="100"
    height="100"
    fill="red"
    filter="url(#blend-filter)" />
  <circle cx="100" cy="100" r="50" fill="blue" filter="url(#blend-filter)" />
</svg>

Wir können auf das in2-Attribut zugreifen:

const feBlends = document.querySelectorAll("feBlend");

console.log(feBlends[0].in2.baseVal); // Output: "SourceAlpha"
console.log(feBlends[1].in2.baseVal); // Output: "BackgroundImage"

Spezifikationen

Specification
Filter Effects Module Level 1 # dom-svgfeblendelement-in2

Browser-Kompatibilität

Siehe auch

SVGAnimatedString