SelfSVG - SVG-Grafiken selbst erstellen

4.5Füllbilder

Wie schon erwähnt, lassen sich auch Muster mit externen Bildern erzeugen. Dazu benötigt man das <image>-Tag, welches die folgenden Attribute beinhalten darf:

x - horizontale Position der linken oberen Ecke
y - vertikale Position der linken oberen Ecke
width - Breite
height - Höhe
xlink:href - Link zum Bild

<image x="0" y="0" width="200" height="185" xlink:href="tux.png" />

Listing 4-8: Das <image>-Element

Das <image>-Tag wird ebenso behandelt wie ein SVG-Objekt und innerhalb des <pattern>-Bereichs plaziert.

Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="picture" x="20" y="20" width="50" height="60" patternUnits="userSpaceOnUse">
      <image x="0" y="0" width="50" height="60" xlink:href="tux.png" />
    </pattern>
  </defs>
  <rect x="20" y="20" width="200" height="120" fill="url(#picture)" stroke-width="2" stroke="black" />
</svg>

Listing 4-9: Ein Muster

Abbildung 4-5: Ein Rechteck, welches mit einem sich wiederholenden Bild gefüllt ist

Füllmuster

Füllungen entfernen