SVG Filter

SVG-Filter sind eine leistungsstarke Technologie für Grafikeffekte, mit der verschiedene visuelle Effekte erzielt werden können, wie z. B. Unschärfe, Schatten, Beleuchtung usw.

Filter können auf SVG-Grafikelemente wie Rechtecke, Kreise, Pfade usw. sowie auf SVG-Textelemente angewendet werden, wodurch sie unterschiedliche Erscheinungsbilder und Effekte erhalten.

Grundlegende Syntax

SVG-Filter verwenden normalerweise das<filter>Element zum Definieren und werden über dasfilterAttribut auf die Zielelemente angewendet.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义滤镜 -->
  <filter id="filter_id">
    <!-- 滤镜效果 -->
  </filter>
  
  <!-- 应用滤镜的目标元素 -->
  <rect x="50" y="50" width="100" height="80" filter="url(#filter_id)" />
</svg>

Filtereffekte

SVG-Filter können eine Vielzahl von Effekten erzielen. Häufige Filtereffekte sind:

  • Unschärfe: erzeugt einen Unschärfeeffekt im Bild unter Verwendung des<feGaussianBlur>Element.

  • Schatten: fügt dem Bild einen Schatteneffekt hinzu, unter Verwendung des<feDropShadow>Element.

  • Helligkeits- und Kontrastanpassung: passt die Helligkeit und den Kontrast des Bildes an, unter Verwendung des<feComponentTransfer>Element.

  • Farbmatrix: ändert die Farbe des Bildes durch Farbmatrixoperationen unter Verwendung des<feColorMatrix>Element.

  • Mischmodus: mischt zwei Bilder zusammen, unter Verwendung des<feBlend>Element.

Der folgende Code definiert einen Unschärfefilter und wendet ihn dann auf ein rot gefülltes Rechteck an, wodurch das Rechteck einen Unschärfeeffekt erhält.

Beispiele

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Weichzeichnerfilter definieren -->
  <filter id="blur_filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
 
  <!-- Rechteck, das den Unschärfefilter anwendet -->
  <rect x="50" y="50" width="100" height="80" fill="red" filter="url(#blur_filter)" />
</svg>

Selbst ausprobieren »

Die verfügbaren SVG-Filter sind:

  • feBlend – Filter, der Bilder kombiniert
  • feColorMatrix – Wird zur Konvertierung von Farbfiltern verwendet
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - Filter-Schatten
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight - Für Beleuchtungsfilter
  • fePointLight - Für Beleuchtungsfilter
  • feSpotLight - Für Beleuchtungsfilter

RemarkAußerdem können mehrere Filter auf jedem SVG-Element verwendet werden!

Hinweise

  • SVG-Filter können in Kombination verwendet werden. Innerhalb eines einzelnen<filter>Elements können mehrere Filtereffekte definiert werden.

  • Jeder Filtereffekt hat verschiedene Parameter, die angepasst werden können, wie z. B. den Standardabweichungsparameter des Weichzeichnerfilters, den Offset und den Unschärferadius des Schattenfilters usw.

  • SVG-Filter können mit CSS-Stylesheets oder direkt auf SVG-Elementen unter Verwendung vonstyleAttributen zur Definition verwendet werden.

Durch die Verwendung von SVG-Filtern können Sie verschiedene visuelle Effekte zu SVG-Grafikelementen hinzufügen, wodurch sie lebendiger und vielfältiger erscheinen.

Andere Erweiterungen