Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

SVGFECompositeElement: Eigenschaft in1

Baseline Widely available

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

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

Wert

Ein SVGAnimatedString-Objekt.

Beispiele

In diesem Beispiel werden zwei <feComposite>-Elemente in einem Filter definiert, jedes mit einem anderen in-Attribut.

html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="filter1">
    <feImage
      href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
      width="200" />
    <feComposite in="SourceGraphic" operator="over" />
    <feComposite in="SourceGraphic" operator="in" />
  </filter>
  <circle cx="50" cy="50" r="30" filter="url(#filter1)" />
</svg>

Wir können auf das in-Attribut zugreifen:

js
const composites = document.querySelectorAll("feComposite");

console.log(composites[0].in1.baseVal); // output: "SourceGraphic"
console.log(composites[1].in1.baseVal); // output: "SourceGraphic"

Spezifikationen

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

Browser-Kompatibilität

Siehe auch