Filtereffekte

Es gibt Situationen, in denen grundlegende Formen nicht die Flexibilität bieten, die Sie benötigen, um einen bestimmten Effekt zu erzielen. Schlagschatten, um ein populäres Beispiel zu nennen, können nicht vernünftigerweise mit einer Kombination von Farbverläufen erstellt werden. Filter sind der Mechanismus von SVG, um anspruchsvolle Effekte zu erzeugen.

Ein einfaches Beispiel ist das Hinzufügen eines Weichzeichnungseffekts zu SVG-Inhalten. Während grundlegende Unschärfen mit Hilfe von Farbverläufen erreicht werden können, wird der Weichzeichnungsfilter benötigt, um darüber hinauszugehen.

Beispiel

Filter werden durch das <filter>-Element definiert, das in den <defs>-Bereich Ihrer SVG-Datei eingefügt werden sollte. Zwischen den Filter-Tags befindet sich eine Liste von Primitiven: grundlegende Operationen, die auf den vorherigen Operationen aufbauen (wie Weichzeichnen, Hinzufügen eines Lichteffekts usw.). Um den von Ihnen erstellten Filter auf ein grafisches Element anzuwenden, setzen Sie das filter-Attribut.

html

<svg
  width="250"
  viewBox="0 0 200 85"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <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="#FFFFFF" 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 der Alphakanal der Quellgrafik ist; wendet eine Weichzeichnung von 4 an; und speichert das result in einem temporären Speicher 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 Speicher "offsetBlur". Die zwei ersten Primitiven haben gerade einen Schlagschatten erstellt.

Schritt 3

html

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

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

Schritt 4

html

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

Das 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" />

Das 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", welches der Schlagschatten ist, und "litPaint", welches die ursprüngliche Quellgrafik mit einem Lichteffekt ist, zusammen.

Quellgrafik

Primitive 1

Primitive 2

Primitive 3

Primitive 4

Primitive 5

Primitive 6