Filtereffekte

Es gibt Situationen, in denen einfache Formen nicht die Flexibilität bieten, die Sie benötigen, um einen bestimmten Effekt zu erzielen. Beispielsweise können Schatten nicht vernünftig mit einer Kombination von Verläufen erstellt werden. Filter sind der Mechanismus in SVG, um anspruchsvolle Effekte zu erzeugen.

Ein einfaches Beispiel ist das Hinzufügen eines Unschärfeeffekts zu SVG-Inhalten. Während einfache Unschärfen mit Hilfe von Verläufen erzielt werden können, ist der Unschärfefilter erforderlich, um darüber hinausgehende Effekte zu erzielen.

Beispiel

Filter werden durch das <filter> Element definiert, welches im <defs> Abschnitt Ihrer SVG-Datei platziert werden sollte. Zwischen den Filter-Tags befindet sich eine Liste von Primitiven: grundlegende Operationen, die auf den vorhergehenden Operationen aufbauen (wie Unschärfe, Hinzufügen eines Lichteffekts usw.). Um Ihren erstellten Filter auf ein grafisches Element anzuwenden, setzen Sie das Attribut filter.

html

<svg width="250" viewBox="0 0 200 85" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Filter declaration -->
    <filter
      id="MyFilter"
      filterUnits="userSpaceOnUse"
      x="0"
      y="0"
      width="200"
      height="120">
      <!-- offsetBlur -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur" />

      <!-- litPaint -->
      <feSpecularLighting
        in="blur"
        surfaceScale="5"
        specularConstant=".75"
        specularExponent="20"
        lighting-color="#bbbbbb"
        result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000" />
      </feSpecularLighting>
      <feComposite
        in="specOut"
        in2="SourceAlpha"
        operator="in"
        result="specOut" />
      <feComposite
        in="SourceGraphic"
        in2="specOut"
        operator="arithmetic"
        k1="0"
        k2="1"
        k3="1"
        k4="0"
        result="litPaint" />

      <!-- merge offsetBlur + litPaint -->
      <feMerge>
        <feMergeNode in="offsetBlur" />
        <feMergeNode in="litPaint" />
      </feMerge>
    </filter>
  </defs>

  <!-- Graphic elements -->
  <g filter="url(#MyFilter)">
    <path
      fill="none"
      stroke="#D90000"
      stroke-width="10"
      d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
    <path
      fill="#D90000"
      d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
    <g fill="white" stroke="black" font-size="45" font-family="Verdana">
      <text x="52" y="52">SVG</text>
    </g>
  </g>
</svg>

Schritt 1

html

<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />

<feGaussianBlur> nimmt in "SourceAlpha", was den Alphakanal der Quellgrafik darstellt; wendet eine Unschärfe von 4 an und speichert das result in einem temporären Puffer namens "blur".

Schritt 2

html

<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />

<feOffset> nimmt in "blur", das wir zuvor erstellt haben; verschiebt das Ergebnis "4" nach rechts und "4" nach unten und speichert das result im Puffer "offsetBlur". Die ersten beiden Primitiven haben einen Schatten erzeugt.

Schritt 3

html

<feSpecularLighting
  in="blur"
  surfaceScale="5"
  specularConstant=".75"
  specularExponent="20"
  lighting-color="#bbbbbb"
  result="specOut">
  <fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>

<feSpecularLighting> nimmt in "blur", erzeugt einen Lichteffekt und speichert das result im Puffer "specOut".

Schritt 4

html

<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />

Der erste <feComposite> nimmt in "specOut" und "SourceAlpha", maskiert das Ergebnis von "specOut", sodass das Ergebnis nicht größer als "SourceAlpha" (die ursprüngliche Quellgrafik) ist, und überschreibt das result "specOut".

Schritt 5

html

<feComposite
  in="SourceGraphic"
  in2="specOut"
  operator="arithmetic"
  k1="0"
  k2="1"
  k3="1"
  k4="0"
  result="litPaint" />

Der zweite <feComposite> nimmt in "SourceGraphic" und "specOut", fügt das Ergebnis von "specOut" über "SourceGraphic" hinzu und speichert das result in "litPaint".

Schritt 6

html

<feMerge>
  <feMergeNode in="offsetBlur" />
  <feMergeNode in="litPaint" />
</feMerge>

Schließlich fügt <feMerge> "offsetBlur", also den Schatten, und "litPaint", die ursprüngliche Quellgrafik mit einem Lichteffekt, zusammen.

Quellgrafik

Primitive 1

Primitive 2

Primitive 3

Primitive 4

Primitive 5

Primitive 6

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden