Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.9 feOffset

Der primitive Filter feOffset verschiebt ein Input-Bild durch einen festzulegenden Vektor.

Die Verschiebung wird mit Hilfe der Attribute dx (Verschiebung entlang der x-Achse) und dy (Verschiebung entlang der y-Achse) bestimmt, die als Wert eine Längenangabe erwarten. Voreingestellter Wert für beide Attribute ist 0, d.h. wenn Sie diese Attribute nicht verwenden, zeigt feOffset keinen sichtbaren Effekt.

Der primitive Filter feOffset ist ein wichtiger Bestandteil für die Erzeugung von Schatteneffekten.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?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="380px" height="370px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Der primitive Filter feOffset</title>
  <desc>
    Beispiele für die Verwendung von feOffset
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:16px;
            font-weight:bold;}
    ]]>
    </style>
    <symbol id="smilie">
      <desc>ein lachendes Smilie</desc>
      <circle id="gesicht" cx="20" cy="20" r="15"
        fill="yellow" stroke="black" />
      <circle id="auge-links" cx="15" cy="15" r="2"
        fill="black" stroke="black" />
      <circle id="auge-rechts" cx="25" cy="15" r="2"
        fill="black" stroke="black" />
      <line id="nase" x1="20" y1="18" x2="20" y2="23"
        stroke="black" stroke-width="2" />
      <path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
        stroke="black" fill="none" stroke-width="2" />
    </symbol>

<!-- 6 Filter mit feOffset -->
    <filter id="f1">
      <feOffset in="SourceGraphic" dx="-5" dy="-5" />
    </filter>
    <filter id="f2">
      <feOffset in="SourceGraphic" dx="5" dy="5" />
    </filter>
    <filter id="f3">
      <feOffset in="SourceAlpha" dx="-5" />
    </filter>
    <filter id="f4">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="out1" />
      <feOffset in="out1" dx="-3" dy="2" />
    </filter>
<!-- zusätzlich mit feGaussianBlur und feMerge -->
    <filter id="f5" x="-25%" y="-20%" width="150%" height="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="out1" />
      <feOffset in="out1" dx="-3" dy="2" result="out2" />
      <feMerge>
        <feMergeNode in="out2" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <filter id="f6" x="-.3" y="-.5" width="1.9" height="1.9">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="out1" />
      <feOffset in="out1" dx="4" dy="-4" result="out2" />
      <feMerge>
        <feMergeNode in="out2" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

<!-- die Instanzen des Symbols "smilie" -->
  <use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />
  <use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"
    filter="url(#f1)" />
  <use xlink:href="#smilie" transform="translate(250,10) scale(2.7)"
    filter="url(#f2)" />
  <use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"
    filter="url(#f3)" />
  <use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"
    filter="url(#f4)" />
  <use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"
    filter="url(#f5)" />
  <use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
    filter="url(#f6)" />

<!-- Text und Hilfslinien -->
  <text x="145" y="130">feOffset</text>
  <text x="58" y="130">Original</text>
  <line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
      

Im obigen Beispiel bewirken die Filter f1 und f2 eine Verschiebung des Quellbildes. Der Effekt von feOffset benötigt in der Regel mehr Raum, als das Ausmaß des Orginalbildes. Der Effekt wird im Beispiel also abgeschnitten dargestellt, da der Bereich des jeweiligen Filters nicht angepasst wurde.

Im Filtern f3 wird feOffset auf den Alphakanal des Quellbildes angewandt. Im Filter f4 wird das Alphabild zuvor noch durch die Verwendung des primitiven Filters feGaussianBlur weichgezeichnet. Diese Technik ist die Grundlage zur Erzeugung von Schatteneffekten.

Um einen Schatteneffekt zu erzeugen müssen Sie also zuerst der weichgezeichnete Alphakanal des Quellbildes etwas verschieben und diesen Output dann mit dem Quellbild vermengen (überblenden). In den Filtern f5 und f6 wird daher zuletzt feMerge verwendet. Dieser Filter überblendet mehrere Input-Bilder in der Reihenfolge Ihres Vorkommens innerhalb der in-Atteribute seiner Kind-Elemente feMergeNode.




index  |  Kapitel 14  |  14.8  <<  | 14.9 |  >>  14.10   feMorphology