SVG Tutorial

Die Attributgruppe filter_primitive_attributes_with_in enthält alle Attribute der Attributgruppe filter_primitive_attributes und das Attribut in mit dessen Hilfe Sie das Input-Bild für den primitiven Filter bestimmen können.

in
Voreinstellung: SourceGraphic.
Legt das Input-Bild für den primitiven Filter fest.
Möglicher Wert für dieses Attribut ist entweder eines von 6 festgelegten Schlüsselworten:
SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint oder StrokePaint,
oder der Wert eines vorangegangenen result-Attributs innerhalb desselben filter-Elements.
Wenn Sie das Attribut in nicht verwenden, wird der Output des direkt vorangegangenen primitiven Filter-Elements als Input verwendet. Wenn ein solches primitives Filter-Element nicht existiert, d.h. wenn der primitive Filter der erstplatzierte innerhalb eines filter-Elements ist, und nur dann, wird die Voreinstellung SourceGraphic verwendet.

SourceGraphic:
Der voreingestellte Wert des Attributs in. Bezeichnet das Bild des Elements oder Objekts, das den Filter referenziert. Also das Originalbild bzw. das "QuellBild".

SourceAlpha:
Bezeichnet den Alphakanal des Originalbildes.
Der Alphakanal definiert alle transparenten bzw. semitransparenten Pixel in einer Grafik. Das Bild des Alphakanal beschreibt also die Transparenz der Grafik.

BackgroundImage:
Bezeichnet das Bild, das den Hintergrund des referenzierenden Elements bzw. Objekts darstellt. Um ein Hintergrundbild als Input verwenden zu können, muß innerhalb eines entsprechenden Container-Elements (g oder svg) mit Hilfe des Attributs enable-background und dem Wert new ausdrücklich die Erzeugung von Hintergrundbildern aktiviert werden. Nur dann gehören alle Kind-Elemente des Containers zum möglichen Hintergrundbild.
Das eigentliche Hintergrundbild ist der Ausschnitt des möglchen Hintergrundbildes, der vom referenzierenden Element überdeckt wird.
Beachten Sie: Das Container-Element muß ein Vorfahr des referenzierenden Elements sein.
Beachten Sie: Das referenzierende Element gehört nicht zum Hintergrundbild.

BackgroundAlpha:
Bezeichnet den Alphakanal des Bildes, das den Hintergrund des referenzierenden Elements bzw. Objekts darstellt. Auch hier muß die Erzeugung von Hintergrundbildern durch Verwendung von enable-background und dem Wert new ausdrücklich definiert werden.

FillPaint:
Bezeichnet den Inhalt der Eigenschaft fill im referenzierden Element. Normalerweise ist dieser Input (dieses Bild) lichtundurchlässig. Wenn der Inhalt von fill allerdings ein Verlauf oder Muster ist, dann besitzt das Bild einen eigenen Alphakanal. Es ist an einigen Stellen lichtdurchlässig (transparent oder semi-transparent).

StrokePaint:
Bezeichnet den Inhalt der Eigenschaft stroke im referenzierden Element. Normalerweise beinhaltet auch dieses Bild keine Transparenz, also keinen Alphakanal. Wenn der Inhalt von fill allerdings ein Verlauf oder Muster ist, dann ist es an einigen Stellen transparent oder semi-transparent, hat also einen Alphakanal.

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="600px" height="460px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>filter_primitive_attributes_with_in</title>
  <desc>
    Attribute für primitive Filter.
    Das Attribut in und seine Schlüsselworte.
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:20px;
            font-weight:bold;}
      ellipse {fill:url(#v1); stroke:red; stroke-width:2px;}
      line {fill:none; stroke:black;}
    ]]>
    </style>
    <linearGradient id="v1"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset=".2" stop-color="limegreen" />
      <stop offset="1" stop-color="black" />
    </linearGradient>
<!-- Vier Weichzeichner mit verschiedenen inputs -->
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="out1" />
    </filter>
    <filter id="f2">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="out1" />
    </filter>
    <filter id="f3">
      <feGaussianBlur in="FillPaint" stdDeviation="3" result="out1" />
    </filter>
    <filter id="f4">
      <feGaussianBlur in="StrokePaint" stdDeviation="3" result="out1" />
    </filter>
  </defs>

<!-- die referenzierenden Elemente -->
  <ellipse cx="120" cy="90" rx="80" ry="30" />
  <ellipse cx="120" cy="170" rx="80" ry="30" filter="url(#f1)" />
  <ellipse cx="120" cy="250" rx="80" ry="30" filter="url(#f2)" />
  <ellipse cx="120" cy="330" rx="80" ry="30" filter="url(#f3)" />
  <ellipse cx="120" cy="410" rx="80" ry="30" filter="url(#f4)" />

<!-- Text und Hilfslinien -->
  <line x1="230" y1="90" x2="380" y2="90" />
  <text x="400" y="97">Ohne Filter</text>
  <line x1="230" y1="170" x2="380" y2="170" />
  <text x="400" y="177">SourceGraphic</text>
  <line x1="230" y1="250" x2="380" y2="250" />
  <text x="400" y="257">SourceAlpha</text>
  <line x1="230" y1="330" x2="380" y2="330" />
  <text x="400" y="337">FillPaint</text>
  <line x1="230" y1="410" x2="380" y2="410" />
  <text x="400" y="417">FillStroke</text>
  <text x="15" y="40"
    style="font-size:24px;">
    feGaussianBlur mit verschiedenen Input&apos;s
  </text>
</svg>
      

Im obigen Beispiel wird der Filter feGaussianBlur auf 4 Ellipsen angewendet. Dabei wird für jede Ellipse ein anderer Filter verwendet, denn in jedem der 4 Filter sorgt ein anderes Schlüsselwort für einen unterschiedlichen Input. Nacheinander werden die Schlüsselworte SourceGraphic, SourceAlpha, FillPaint und StrokePaint als Wert für das Attribut in verwendet. Da der Output von feGaussianBlur das Bild lediglich weichzeichnet, ist gut zu erkennen, welche Bildpunkte durch die verschiedenen Schlüsselworte des Attributs in verwendet bzw. gefiltert werden.

Das folgende Beispiel zeigt die Verwendung der Schlüsselworte BackgroundImage und BackgroundAlpha.

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="340px" height="500px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>filter_primitive_attributes_with_in</title>
  <desc>
    Attribute für primitive Filter. Das Attribut in und
    die Schlüsselworte BackgroundImage und BackgroundAlpha.
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:20px;
            font-weight:bold; fill:white;}
      rect {fill:blue; stroke:black;}
    ]]>
    </style>
    <filter id="f1">
      <feColorMatrix in="BackgroundImage"
        type="hueRotate" values="-50" result="out1" />
      <feGaussianBlur in="out1" stdDeviation="10" result="out2" />
    </filter>
    <filter id="f2">
      <feColorMatrix in="BackgroundImage"
        type="hueRotate" values="-50" result="out1" />
      <feGaussianBlur in="out1" stdDeviation="10" result="out2" />
      <feMerge>
        <feMergeNode in="out2" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <filter id="f3">
      <feColorMatrix in="BackgroundAlpha"
        type="hueRotate" values="-50" result="out1" />
      <feGaussianBlur in="out1" stdDeviation="10" result="out2" />
      <feMerge>
        <feMergeNode in="out2" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

<!-- Grafik ohne Filter -->
  <g enable-background="new" transform="translate(10,10)" >
    <rect x="10" y="10" width="300" height="100" />
    <g>
      <rect x="50" y="30" width="220" height="60"
        style="fill:none; stroke:black; stroke-width:2px;" />
      <text x="57" y="68">BackgroundImage</text>
    </g>
  </g>

<!-- BackgroundImage-Filter ohne SourceGraphic -->
  <g enable-background="new" transform="translate(10,130)">
    <rect x="10" y="10" width="300" height="100" />
    <g filter="url(#f1)">
      <rect x="50" y="30" width="220" height="60"
        style="fill:none;" />
      <text x="57" y="68">BackgroundImage</text>
    </g>
  </g>

<!-- BackgroundImage-Filter mit SourceGraphic -->
  <g enable-background="new" transform="translate(10,250)">
    <rect x="10" y="10" width="300" height="100" />
    <g filter="url(#f2)">
      <rect x="50" y="30" width="220" height="60"
        style="fill:none;" />
      <text x="57" y="68">BackgroundImage</text>
    </g>
  </g>

<!-- BackgroundAlpha-Filter mit SourceGraphic -->
  <g enable-background="new" transform="translate(10,370)">
    <rect x="10" y="10" width="300" height="100" />
    <g filter="url(#f3)">
      <rect x="50" y="30" width="220" height="60"
        style="fill:none;" />
      <text x="57" y="68">BackgroundAlpha</text>
    </g>
  </g>
</svg>
      

Im obigen Beispiel sind drei Filter f1, f2 und f3 definiert, die mit Hilfe des primitiven Filters feColorMatrix eine Farbveränderung des Inputs erzeugen und das Ergebnis dieses Filters dann durch feGaussianBlur weichzeichnen. Die Filter f2 und f3 beinhalten außerdem noch den primitiven Filter feMerge mit seinen Kindelementen feMergeNode, welcher den Output der ersten beiden primitiven Filter mit dem Quellbild zusammenfügt.

Weiterhin sind, durch Verwendung des g-Elements drei Gruppen, die jeweils identisch aufgebaut sind, im Beispiel festgelegt. Jede dieser Gruppen besteht aus einem blau gefüllten Rechteck und einer Unter-Gruppe, die ein transparentes Rechteck und einen Text enthält.
Die Filter werden jeweils von dem g-Element referenziert, welches die Untergruppen bildet.

Die erste Gruppe wird ohne Filter dargestellt.

In der zweiten Gruppe wird der Filter f1 eingebunden, der als Input BackgroundImage verwendet. Der Bereich, den das referenzierende Objekt auf dem Hintergrundbild einnimmt wird dadurch verändert. Das referenzierende Objekt selbst, die Untergruppe, wird nicht am Bildschirm dargestellt.
Beachten Sie: damit dieser Filter auf das Objekt angewendet werden kann, wird im äußeren g-Element das Attribut enable-background mit dem Wert new verwendet. Dieses bewirkt, dass vom user agent überhaupt ein Hintergrundbild erzeugt wird. Da die Erzeugung von Hintergrundbildern eine äußerst ressourcen-intensive Angelegenheit darstellt, ist dies nicht das Standardverhalten des user-agents.

In der dritten Gruppe wird der Filter f2 referenziert, der auch das referenzierende Objekt, durch Verwendung von feMerge, darstellt.

In der letzten Gruppe wird der Filter f3 verwendet. Dieser Filter benutzt das Alphabild des Hintergrundbildes als Input, das in diesem Fall nur aus einem schwarzen Rechteck besteht. Außerdem wird auch hier das referenzierende Objekt angezeigt.

Anmerkung des Autors: Der Adobe SVG Viewer 3.0 hat noch Probleme bei der korrekten Interpretation von Hintergrundbildern. Die Beispielgrafik der W3C SVG Recommendation zu diesem Thema wurde nicht gemäß der Empfehlung dargestellt.