SVG <filter> Filter

Das SVG-Filter-Element <filter> wird verwendet, um schöne Effekte für SVG-Bilder hinzuzufügen. Zum Beispiel Schatten, Unschärfe oder Glanz.

Filter-Beispiel

Dies ist ein einfaches SVG-Filter-Beispiel, das zwei Ellipsen zeigt. Die linke Ellipse verwendet kein Filter, die rechte Ellipse wird durch einen Gauss-Verzerrungsfilter gerendert:

<svg width="500" height="100">
<defs>
　　　　　　<filter　id="blurFilter"　y="-5"height="40"
　　　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="3"y="-"/>
　　　　　　</filter>
　　</defs>
　　　　
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:　none;　fill:　#0000ff;　"　/>
　　<ellipse cx="155" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:none;　fill:#0000ff;　filter:url(#blurFilter);"　/>
</svg>

Bildeffekt nach dem Ausführen:

Beobachten Sie, wie die Kante des rechten Ellipses verwischt ist.

Filtereingabe und -ausgabe

SVG-Filter benötigen einige Eingaben (Quelle) und wenden den Filtereffekt darauf an. Der Eingabe können die Formgraphik (RGB-Farbe), der Alpha-Kanal der Form oder die Ausgabe anderer Filter sein.

SVG-Filter erzeugen aus dem Eingabe eine Bildausgabe (Ergebnis). Diese Ausgabe wird normalerweise angezeigt, anstatt die Form, auf die der Filter angewendet wird, anzuwenden. Die Ausgabe des Filters kann als Eingabe für einen anderen Filter verwendet werden. Daher können Filter verknüpft werden.

Dies ist eine Illustration der Eingabe und Ausgabe von SVG-Filtern:

Der Eingabe eines SVG-Filters wird normalerweise in den Attributen des in-Filterelements spezifiziert. Dies ist ein Beispiel:

　<feGaussianBlur stdDeviation="3in="SourceGraphic"　/>

Wenn die Ausgabe eines SVG-Filters als Eingabe für einen anderen Filter verwendet werden soll, muss ein Attribut zum result-Filterelement hinzugefügt werden. Dies ist ein Beispiel:

<feGaussianBlur stdDeviation="3in="SourceGraphic" result="blur"/>

Nun kann ein weiterer SVG-Filter durch Einfügen des Werts blur in das Attribut in des Filters verwendet werden. Im obigen Beispiel ist der Wert blur im Attribut result des Filters angegeben.

Filtergröße

Die Größe eines Filters wird durch die Attribute x, y, width und height festgelegt.

Die x- und y-Attribute werden relativ zu den x und y der verwendeten Eingangsform interpretiert. Da die Ausgabe einiger Filter normalerweise größer als der Eingang ist (z.B. das Hinzufügen eines Weichzeichners um die Form), müssen x und y normalerweise negativ sein, um das durch den Filter hinzugefügte Bild nicht zu schneiden.

In den width- und height-Attributen ist es ebenfalls einfach. Gleichzeitig kann es manchmal erforderlich sein, eine Breite und Höhe zu spezifizieren, die größer als die Eingangsform ist, um die durch den Filter hinzugefügten Effekte nicht zu kürzen.

Kombinationsfilter

Sie könnenElementkombinationsfilter. Dies ist ein Beispiel:

<svg width="500" height="100">
<defs>
　　　　<filter id="blurFilter"2"y="-10"height="40" x="-10" width="150">
　　　　　　　　<feOffset in="SourceAlpha" dx="3"dy="3"result="offset"2"　/>
　　　　　　　　<feGaussianBlur in="offset"2"stdDeviation="3"blur="2"/>
　　　　　　　　feMerge>
　　　　　　　　　　　　<feMergeNode in="blur2"　/>
　　　　　　　　　　　　<feMergeNode in="SourceGraphic"　/>
　　　　　　　　</feMerge>
　　　　</filter>
</defs>
<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);"　/>　
</svg>

Dieses Beispiel erstellt einen SVG-Filter, der zwei Filterelemente enthält: <feOffset> und <feGaussianBlur>. Der Offset-Filtereffekt (feOffset) wirkt auf den Alpha-Kanal der angewandten Form. Der Gaussische Weichzeichner (feGaussianBlur) wirkt auf die Ausgabe des Offset-Filtereffekts.

Das <feMerge>-Element kombiniert den Ausgang des verschwommenen Filters mit dem ursprünglichen Graphik. Die Eingaben werden in der Reihenfolge kombiniert, in der sie im <feMerge>-Element auftreten. Daher wird der hintere Eingang über dem vorderen Eingang angezeigt. Das Ergebnis ist, dass die Form des Bildes wie mit Schatten aussieht. Das Bild nach der Ausführung zeigt:

Gauss-Blur-Filter

Der Gauss-Blur-SVG-Filter kann SVG-Formen verschwommen darstellen. Der Gauss-Blur-Filter besteht ausder <feGaussianBlur>-Elemente darstellt. Hier ist ein Beispiel:

<svg width="500" height="250">
<defs>
　　　　<filter id="blurFilter"4" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);"　/>
</svg>

In diesem Beispiel wird ein <filter> mit einem <feGaussianblur> definiert. Dann wird ein grünes Rechteck definiert, das den Filter über die CSS filter-Eigenschaft referenziert. Hier ist das generierte Bild:

Verblendenstärke

Das Attribut stdDeviation des <feGaussianBlur>-Elements bestimmt, wie verschwommen die Form durch den Filter werden soll. Ein größerer Wert führt dazu, dass die Form verschwommener wird. Hier sind drei Beispiele mit verschiedenen stdDeumation-Werten:

<svg width="500" height="250">
<defs>
　　　　<filter id="blurFilter"5" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="2"　/>
　　　　</filter>
　　　　<filter id="blurFilter"6" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="6"　/>
　　　　</filter>
　　　　<filter id="blurFilter"7" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="12"　/>
　　　　</filter>
</defs>
<rect x="20" y="24" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);"　/>
<rect x="150" y="24" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);"　/>
<rect x="300" y="24" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);"　/>
</svg>

Bildeffekt nach dem Ausführen:

Beachten Sie, wie das Rechteck immer mehr verblasst, je höher der Wert des stdDeumation-Attributs des angewendeten Filters ist.

Alpha-Kanal verblenden

Der obige Beispiel verwendet SourceGraphic als Eingang, was bedeutet, dass die RGB-Farben der Form als Eingang für den Filter verwendet werden. Sie können stattdessen den Alpha-Kanal der Form als Eingang verwenden, indem Sie den Wert SourceAlpha im Attribut in des <feGaussianBlur>-Elements setzen. Ein Beispiel ist hier:

<svg width="500" height="250">
<defs>
　　　　<filter id="blurFilter"8" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feGaussianBlur in="SourceAlpha" stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);"　/>　
</svg>

Bildeffekt nach dem Ausführen:

Beachten Sie, dass selbst wenn ein Rechteck mit Grün gefüllt ist, die Ausgabe des Filters schwarz und weiß ist. Dies tritt auf, wenn der Gauss-Blur-Filter auf den Alpha-Kanal anstatt auf den Grafik-(RGB)-Kanal angewendet wird.

Offset-Filter

Der Offset-Filter akzeptiert einen Eingang und bewegt diesen in der Ausgabe. Das bedeutet, dass er Formen nach oben, unten, links und rechts verschieben kann. Daher funktioniert er ähnlich wie eine Transformation, aber sie wird im Filter durchgeführt. Ein Beispiel ist hier:

<svg width="500" height="250">
<defs>
　　　　<filter id="offsetFilter1" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feOffset in="SourceGraphic" dx="80" dy="20"　/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: #000000; fill: none; filter: url(#offsetFilter"1);"　/>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: #000000; fill: none; "　/>
</svg>

In diesem Beispiel werden zwei Rechtecke an gleicher Stelle definiert. Ein der Rechtecke wird der Offset-Filter angewendet, der es nach unten und nach rechts verschiebt.

Bildeffekt nach dem Ausführen.

Der Offset-Filter scheint auch andere Auswirkungen auf die Shapes zu haben (etwas Verwischen), aber ich bin mir nicht sicher, warum das so ist. Ich konnte bislang keine Erklärung für das Phänomen finden.

Farbmatrixfilter

Farbmatrixfilter können Matrix-Transformationen auf die Farben der Shapes anwenden. Dies ist ein Beispiel:

<svg width="500" height="250">
<defs>
　　　　<filter id="colorMatrixFilter"1" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feColorMatrix in="SourceGraphic" type="matrix"
　　　　　　　　　　　　　　　　values="0 0 0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0　1　0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0　1　0
　　　　　　　　　　　　　　　　"/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: none; fill: #0000ff; filter: url(#colorMatrixFilter"1);"　/>
</svg>

Die Werte der Matrix werden im Attribut values des <feColorMatrix>-Elements bereitgestellt. Es müssen insgesamt4 x 5=2Es gibt keine Werte. Diese Werte werden auf die Farbe des ursprünglichen Shapes angewendet, wie folgt:

　0 0 0 red 0
　0 0 0 green 0
　0 0 0 blue 0
　0 0 0　1　　　　　0

Bildeffekt nach dem Ausführen:

Hinweis: Die Ergebnisse der Farbmatrixfilter in Chrome und Firefox sind etwas seltsam. Der obige Rechteck ist mit der Füllfarbe angegeben, aber nach Abschluss der Farbmatrixfilter bleibt nur der Umriss zurück.

Mischfilter

Mischfilter können die Eingaben aus mehreren Filtern kombinieren und zu einem einzigen Eingang zusammenführen. Dies ist ein Beispiel:

<svg width="500" height="250">
　　<defs>
　　　　<filter id="blurFilter"3"y="-10"height="40" x="-10" width="150">
　　　　　　<feOffset in="SourceAlpha" dx="3"dy="3"result="offset"3"　/>
　　　　　　<feGaussianBlur in="offset"3"stdDeviation="3"blur="3"/>
　　　　　　<feBlend in="SourceGraphic" in}}2="blur3" x="-10" width="160"/>
　　　　</filter>
　　</defs>
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　　filter: url(#blurFilter3);"　/>
</svg>

In diesem Beispiel wird eine3von Filtereffekten. Die ersten zwei sind die verknüpfte Verschiebung und der Gauss-Verwischungseffekt. Der dritte istEs werden zwei Eingaben (in und in2）und sie zu einem Effekt mischen.

Die erzeugten Effekte ähneln sehr stark den Effekten der Kombinationsfilter, die in diesem Artikel zuvor beschrieben wurden.