Das Attributin identifiziert die Eingabe für das angegebene Filter-Primitive.

Der Wert kann entweder eines der sechs unten definierten Schlüsselwörter sein oder ein String, der mit einem vorherigen Wert des Attributsresult innerhalb desselben<filter>-Elements übereinstimmt. Wenn kein Wert angegeben wird und dies das erste Filter-Primitive ist, dann wird dieses Filter-PrimitiveSourceGraphic als seine Eingabe verwenden. Wird kein Wert angegeben und handelt es sich um ein nachfolgendes Filter-Primitive, dann wird dieses Filter-Primitive das Ergebnis des vorherigen Filter-Primitives als Eingabe verwenden.

Wenn der Wert fürresult mehrfach innerhalb eines gegebenen<filter>-Elements auftritt, dann wird ein Verweis auf dieses Ergebnis das nächstvorhergehende Filter-Primitive mit dem gegebenen Wert für das Attributresult verwenden.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feDropShadow>
• <feGaussianBlur>
• <feMergeNode>
• <feMorphology>
• <feOffset>
• <feSpecularLighting>
• <feTile>

Anwendungshinweise

SourceGraphic

Dieses Schlüsselwort repräsentiert die Grafikelemente, die die ursprüngliche Eingabe in das<filter>-Element waren.

SourceAlpha

Dieses Schlüsselwort repräsentiert die Grafikelemente, die die ursprüngliche Eingabe in das<filter>-Element waren.SourceAlpha hat alle dieselben Regeln wieSourceGraphic, außer dass nur der Alpha-Kanal verwendet wird.

BackgroundImage

Dieses Schlüsselwort repräsentiert eine Bildaufnahme des SVG-Dokuments unterhalb der Filterregion zu dem Zeitpunkt, an dem das<filter>-Element aufgerufen wurde.

BackgroundAlpha

Gleich wieBackgroundImage, außer dass nur der Alpha-Kanal verwendet wird.

FillPaint

Dieses Schlüsselwort repräsentiert den Wert derfill-Eigenschaft auf dem Ziel-Element für den Filtereffekt. In vielen Fällen ist dasFillPaint überall opak, aber das könnte nicht der Fall sein, wenn eine Form mit einem Verlauf oder Muster gefüllt ist, welches selbst transparente oder halbtransparente Teile enthält.

StrokePaint

Dieses Schlüsselwort repräsentiert den Wert derstroke-Eigenschaft auf dem Ziel-Element für den Filtereffekt. In vielen Fällen ist dasStrokePaint überall opak, aber das könnte nicht der Fall sein, wenn eine Form mit einem Verlauf oder Muster gestrichen ist, welches selbst transparente oder halbtransparente Teile enthält.

<filter-primitive-reference>

Dieser Wert ist ein zugewiesener Name für das Filter-Primitive in Form eines<custom-ident>. Wenn angegeben, können die Grafiken, die aus der Verarbeitung dieses Filter-Primitives resultieren, durch ein in-Attribut auf einem nachfolgenden Filter-Primitive innerhalb desselben Filter-Elements referenziert werden. Wird kein Wert angegeben, steht die Ausgabe nur zur Wiederverwendung als implizite Eingabe in das nächste Filter-Primitive zur Verfügung, wenn dieses Filter-Primitive keinen Wert für sein in-Attribut bereitstellt.

Workaround für BackgroundImage

BackgroundImage wird als Filterquelle in modernen Browsern nicht unterstützt (siehe dieKompatibilitätstabelle zu feComposite). Daher müssen wir eines der Bilder innerhalb des Filters selbst mit einem<feImage>-Element importieren.

HTML

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <defs>    <filter>      <!-- This will not work. -->      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />    </filter>  </defs>  <image    href="mdn_logo_only_color.png"    x="10%"    y="10%"    width="80%"    height="80%" />  <circle    cx="50%"    cy="40%"    r="40%"    fill="#cc0000"    filter="url(#backgroundMultiply)" /></svg><svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <defs>    <filter>      <!-- This is a workaround. -->      <feImage        href="mdn_logo_only_color.png"        x="10%"        y="10%"        width="80%"        height="80%" />      <feBlend in2="SourceGraphic" mode="multiply" />    </filter>  </defs>  <circle    cx="50%"    cy="40%"    r="40%"    fill="#cc0000"    filter="url(#imageMultiply)" /></svg>

svg {  width: 200px;  height: 200px;  display: inline;}

Ergebnis

Spezifikationen