(0) exportieren Drucken
Alle erweitern

Filtereffekte

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen jetzt Scalable Vector Graphics (SVG)-Filtereffekte. Mit SVG-Filtern können Sie Grafiken direkt im Browser bearbeiten, ähnlich wie bei einer Anwendung wie Adobe Photoshop. Beachten Sie die folgende SVG-Grafik.

SVG-Logo

Mit SVG-Filterelementen können Sie diese simple Grafik einfach in eine optisch viel ansprechendere Form umwandeln.

SVG-Logo mit Filterelementen

Beide Bilder wurden direkt aus dem Filterbeispiel der W3C-SVG-Spezifikationen entnommen. Betrachten Sie dieses kanonische Beispiel genauer. Die erste Grafik besteht einfach aus zwei SVG-Pfaden und dem Text"SVG". Es wird mit dem folgenden Markup gerendert.


<g>
  <path fill="none" stroke="#D90000" stroke-width="10" 
        d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /> 
        <!-- Outer hollow area. -->
  <path fill="#D90000" 
        d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> 
        <!-- Inner filled arena. -->
  <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
    <text x="52" y="76">SVG</text> 
    <!-- The text "SVG". -->
  </g>
</g>


Wenn Sie einen  SVG-Filtereffekt auf diese <g>-Gruppe anwenden möchten, definieren Sie einen Filter, benennen Sie ihn (z. B. "MyFilter"), und wenden Sie ihn wie folgt auf die Gruppe an.


<g filter="url(#MyFilter)">
  <path fill="none" stroke="#D90000" stroke-width="10" 
        d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /> <!-- Outer hollow arena. -->
  <path fill="#D90000" 
        d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> <!-- Inner filled arena. -->
  <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
    <text x="52" y="76">SVG</text> <!-- The "SVG" text. -->
  </g>
</g>


Um den Filter, mit dem der Effekt in der zweiten Abbildung erzielt wurde, besser zu verstehen, betrachten Sie das vollständige Beispiel. Beachten Sie, dass dieses Beispiel gegenüber dem Original leicht verändert wurde, damit es in einem HTML5-Dokument (und nicht in einem SVG-Dokument) funktioniert.


<!DOCTYPE html>
<html><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example filters01.svg - introducing filter effects</title>
</head><body>
  <svg width="7.5cm" height="5cm" viewBox="0 0 200 120">
    <desc>An example that combines multiple filter primitives
          to produce a 3D lighting effect on a graphic. The graphic contains the
          string "SVG" sitting on top of an oval filled in red
          and surrounded by an oval outlined in red.</desc>
    <defs>
      <filter id="MyFilter" filterUnits="userSpaceOnUse">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
        <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
        <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"/>
        <feMerge>
          <feMergeNode in="offsetBlur"/>
          <feMergeNode in="litPaint"/>
        </feMerge>
      </filter>
    </defs>
    <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />   
    <g filter="url(#MyFilter)" >
      <g>
        <path fill="none" stroke="#D90000" stroke-width="10" 
              d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
        <path fill="#D90000" 
              d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
        <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
          <text x="52" y="76">SVG</text>
        </g>
      </g>
    </g>
  </svg>
</body></html>


Zunächst erstellen Sie einen SVG-Viewport mit entsprechenden Benutzereinheiten und einer angemessenen Größe.


<svg width="7.5cm" height="5cm" viewBox="0 0 200 120">

Danach benennen Sie den Filter mit dem id-Attribut.


<filter id="MyFilter" filterUnits="userSpaceOnUse">

Dieser Filter besteht aus sechs nummerierten Filterprimitiven (von denen fünf eindeutig sind):

1. feGaussianBlur
2. feOffset
3. feSpecularLighting
4. feComposite
5. feComposite
6. feMerge

Filterprimitive können verkettet werden, um sehr komplexe Effekte zu erstellen, indem die Ausgabe eines Primitivs als Eingabe eines anderen verwendet wird. Die Ausgabe von feGaussianBlur (result="blur") wird dann z. B. zur Eingabe für feOffset (in="blur").

Beachten Sie, dass das Schlüsselwort SourceGraphic das Originalbild darstellt, auf das der Filter angewendet wird. In diesem Fall handelt es sich bei dem Quellbild um den gesamten Inhalt des <g>-Elements.


<g filter="url(#MyFilter)" >
  <g>
    <path fill="none" stroke="#D90000" stroke-width="10" 
          d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
    <path fill="#D90000" 
          d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
    <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
      <text x="52" y="76">SVG</text>
    </g>
  </g>
</g>


Daneben stellt das Schlüsselwort SourceAlpha den Alphakanal der Quellgrafik dar. Der Alphakanal enthält normalerweise Transparenzinformationen für eine Grafik. Diese Komponente der Quellgrafik wird an das erste Filterprimitiv (feGaussianBlur) übergeben, wie im folgenden Flussdiagramm dargestellt.

SVG-Flussdiagramm

Die sechs Hauptschritte für den Filter wurden im Flussdiagramm oben nummeriert und werden im Folgenden erläutert:

  1. Das Filterprimitiv feGaussianBlur nimmt Eingaben von SourceAlpha an. Dies ist der Alphakanal der Quellgrafik. Das Ergebnis wird in einem temporären Puffer mit dem Namen "blur" gespeichert. Beachten Sie, dass "blur" als Eingabe für die Filterprimitive 2 und 3 verwendet wird.
  2. Das Filterprimitiv feOffset nimmt den Puffer "blur" an, verschiebt das Ergebnis in die positive x- und y-Richtung um 4 Pixel und erstellt einen neuen Puffer mit dem Namen "offsetBlur". Dieser Puffer wird später zum Erstellen eines Schlagschatteneffekts verwendet.
  3. Das Filterprimitiv feSpecularLighting verwendet den Puffer "blur" als Modell für die Oberflächenanhebung und generiert einen Lichteffekt aus einer einzelnen Lichtquelle. Das Ergebnis wird im Puffer "specOut" gespeichert.
  4. Das Filterprimitiv feComposite maskiert das Ergebnis von Filterprimitiv 3 gemäß dem Alphakanal der ursprünglichen Quelldatei aus, sodass das Zwischenergebnis nicht größer als die ursprüngliche Quelldatei ist. Der Puffername "specOut" wird wieder zum Speichern des Ergebnisses verwendet.
  5. Mit dem Filterprimitiv feComposite werden das Ergebnis des Glanzlichts und die ursprüngliche Quelldatei kombiniert. Das Ergebnis wird im Puffer "litPaint" gespeichert.
  6. Das Filterprimitiv feMerge kombiniert zwei Ebenen. Die untere Ebene besteht aus dem Ergebnis für den Schlagschatten aus Filterprimitiv 2. Die obere Ebene besteht aus dem Ergebnis für das Glanzlicht aus Filterprimitiv 5. Wenn Ihnen diese Reihenfolge falsch vorkommt, erinnern Sie sich daran, dass das letzte SVG-Element über allen zuvor gerenderten SVG-Elementen gerendert wird.

Wie im oben aufgeführten Beispiel gezeigt, können mit SVG-Filtern schnell komplexe Grafiken im Browser erstellt werden. Und da SVG-Filter über JavaScript gesteuert werden können, stellen sie für Webentwickler die Möglichkeit bereit, komplexe, grafikorientierte Apps und Benutzeroberflächen zu erstellen, die für die Endbenutzer glatte, fließende und (über JavaScript) animierte Erlebnisse bieten.

API-Referenz

SVG Element Reference (Filtereffekte beginnt mit "fe")

Beispiele und Lernprogramme

Beispiel für SVG-Filtereffekte
So wird's gemacht: Mischen von zwei Rasterbildern mithilfe von SVG-Filtern

Demos für die Internet Explorer-Testversion

So geht's: SVG-Filtereffekte

IEBlog-Beiträge

SVG-Filtereffekte in IE10

Spezifikation

Scalable Vector Graphics (SVG) 1.1 (Second Edition): Abschnitt 15

 

 

Anzeigen:
© 2014 Microsoft