SVG Tutorial

Sie können den rechteckigen Wirkungsbereich eines Filters begrenzen, d.h. Sie können den Filtereffekt nicht nur auf das gesamte Element oder Objekt, sondern auch auf rechteckige Teilbereiche des Elements oder des Objekts anwenden. Durch die Attribute x und y legen Sie die Koordinaten der linken, oberen Ecke dieses Bereichs fest. Durch die Attribute width und height bestimmen Sie die Ausmaße des rechteckigen Bereichs.

Ob Sie relative oder absolute Maßangaben als Werte für diese Attribute verwenden müssen, regelt das Attribut filterUnits.
Bei Gebrauch des voreingestellten Wertes boundingBox müssen für x, y, width und height relative Werte angegeben werden. Dabei können diese Werte kleiner als 0 bzw. 0% oder größer als 1 bzw. 100% gewählt werden. Da der Wirkungsbereich macher Filter größer ist als das referenzierende Objekt, sind folgende Werte voreingestellt:
x: -10%, y: -10%, width: 120%, height: 120%.

Der zweite mögliche Wert für filterUnits ist userSpaceOnUse. Wenn Sie diesen Wert verwenden erwarten die Attribute x, y, width und height absolute Angaben.

Auch für jedes primitive Filterelement kann durch die Attribute x, y, width und height eine Größenangabe definiert werden.

Um auch für diese Attribute den Zugriff auf das Koordinatensystem des referenzierenden Elements oder Objekts festzulegen, können Sie das Attribut primitiveUnits im filter-Element verwenden. Auch dieses Attribut kann die Werte boundingBox und userSpaceOnUse annehmen.
Beachten Sie: Voreingestellter Wert für primitiveUnits ist userSpaceOnUse (im Gegensatz (!) zu filterUnits).

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="330px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Filter</title>
  <desc>
    Attribute des filter-Elements
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:48px;
            font-weight:bold; }
    ]]>
    </style>
<!-- Filterregion so groß wie Textelement -->
    <filter id="f1"
      x="0" y="0" width="1" height="1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>

<!-- Filterregion größer als Textelement -->
    <filter id="f2"
      x="-20%" y="-30%" width="150%" height="150%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>

<!-- Filterregion in der Breite beschränkt -->
    <filter id="f3"
      x="53%" y="-20%" width="100%" height="150%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>

<!-- Filterregion in der Breite beschränkt -->
    <filter id="f4" filterUnits="userSpaceOnUse"
      x="20" y="180" width="100" height="70">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>

<!-- Filterregion größer als Textelement -->
<!-- Region des Weichzeichners in der Breite beschränkt -->
    <filter id="f5" x="-20%" y="-30%" width="150%" height="150%">
      <feGaussianBlur x="-20" y="-20" width="200" height="350"
        in="SourceGraphic" stdDeviation="3" result="blur_out" />
      <feOffset in="blur_out" dx="3" dy="-3" result="offset_out" />
      <feMerge>
        <feMergeNode in="offset_out" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <text filter="url(#f1)" x="35" y="60">
    Filterregion
  </text>
  <text filter="url(#f2)" x="35" y="120">
    Filterregion
  </text>
  <text filter="url(#f3)" x="35" y="180">
    Filterregion
  </text>
  <text filter="url(#f4)" x="35" y="240">
    FilterRegion
  </text>
  <text filter="url(#f5)" x="35" y="300">
    Filterregion
  </text>
</svg>
      

Im obigen Beispiel sind 5 verschiedene Filter definiert, die jeweils auf ein Textelement angewendet werden. Für alle Filter wurde feGaussianBlur (Weichzeichner) als primitiver Filter verwendet.

Im letzten Filter "f5" wurde zusätzlich noch die Filtertypen feOffset (Bildverschiebung) und feMerge (mehrere Bilder kombinieren) mit Kind-Elementen feMergeNode (Bestimmung der Einzelbilder) benutzt. Nähere Informationen zu den einzelnen Filtertypen finden Sie in den folgenden Kapiteln.

Verwendung der Attribute für das filter-Element im Filter "f1":
Das Attribut filterUnits wurde nicht verwendet, daher gilt die Voreinstellung boundingBox für diesen Filter. Die zu verwendenden Werte für die Attribute x, y, width und height sind deshalb relativer Natur. Durch Verwendung dieser Attribute wurde die Größe der Filterregion so bestimmt, dass sie der Größe des referenzierenden Textelements entspricht. Da der Filtertyp feGaussianBlur mehr Raum benötigt, wird der Filtereffekt leicht beschnitten dargestellt.

Verwendung der Attribute für das filter-Element im Filter "f2":
Die zu verwendenden Werte für die Attribute x, y, width und height sind auch in diesem Filter relativer Natur. Die Filterregion ragt an allen Seiten über das referenzierenden Textelement hinaus. So wird der Filtereffekt korrekt dargestellt.

Verwendung der Attribute für das filter-Element im Filter "f3":
Die zu verwendenden Werte für die Attribute x, y, width und height sind auch in diesem Filter relativer Natur. Die Filterregion überlagert das referenzierenden Textelement nur im hinteren Bereich. Die Ausgabe (der Output) des Filters ist deshalb lediglich dieser Teil des Textelements. Der Rest des Elements wird nicht am Bildschirm dargestellt.

Verwendung der Attribute für das filter-Element im Filter "f4":
Das Attribut filterUnits wurde mit der Einstellung userSpaceOnUse verwendet. Die zu verwendenden Werte für die Attribute x, y, width und height sind deshalb absolut (!). Die Filterregion überlagert das referenzierenden Textelement nur im vorderen Bereich. Die Ausgabe (der Output) des Filters ist deshalb auch hier lediglich dieser Teil des Textelements.

Verwendung der Attribute für das filter-Element im Filter "f5":
Das Attribut filterUnits wurde in diesem Filter wiederum nicht verwendet, daher gilt die Voreinstellung boundingBox für diesen Filter. Die zu verwendenden Werte für die Attribute x, y, width und height im filter-Element sind also relativer Natur. Sie werden so gewählt, dass die Filterregion größer ist, als das Textelement.
Auch das Attribut primitiveUnits wurde in diesem Filter nicht verwendet, daher gilt die Voreinstellung userSpaceOnUse für die primitiven Filter, die dieser filter-Container beinhaltet. Die zu verwendenden Werte für die Attribute x, y, width und height innerhalb des verwendeten primitiven Filters feGaussianBlur sind deshalb absolut (zur Region des Eltern-Elements) angegeben. Dieser Filter wird in der Größe auf den vorderen Berich des Textelements beschränkt.
Die derart beschränkte Ausgabe (Output des Weichzeichners), wird vom zweiten primitiven Filter feOffset als Input-Bild verwendet und erzeugt einen weiteren Output. Durch die Verwendung von feMerge wird dieser letzte Output mit dem originalen Bild des Textelements (SourceGraphic) kombiniert.