SVG/Filter/feTile

Aus SELFHTML-Wiki
< SVG‎ | Filter
Wechseln zu: Navigation, Suche

Der primitive Filter feTile füllt Objekte mit einem Kachelmuster.[1]

  • SVG 1.1
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Beispiel ansehen …
<defs>
  <filter id="gekachelt" x="0" y="0" width="100%" height="100%">
    <feImage result="imgSource" xlink:href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" width="10%" height="10%" preserveAspectRatio="xMidYMid slice"  />
    <feTile in="imgSource" />
  </filter>
</defs>
 
<rect x="20" y="20" width="600" height="490" filter="url(#gekachelt)" />
Das Rechteck erhält den Filter #gekachelt. Hier wird mit feImage ein Bild referenziert und entsprechend verkleinert, so dass es mehrfach in das vorgegebene Rechteck passt. Der Filter feTile kachelt die Grafik dann in das vorgegebene Rechteck.

Folgende Attribute sind möglich:

  • in: Eingangsgrafik
Beachten Sie: Die Eingangsgrafik ist typischerweise die Ausgangsgrafik eines anderen Filters wie feImage, da der Kacheleffekt nur mit Grafiken funktionert, die kleiner als die zu füllende Grafik sind.
Deshalb wird im Allgemeinen für den vorausgehenden Filter mit den Attributen x, y, width und height eine geringere Größe festgelegt.

Quellen[Bearbeiten]

  1. W3C: feTileElement

Referenz[Bearbeiten]