SVGFETileElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGFETileElement extends SVGElement

Beschreibung

SVGFETileElement ist die DOM-Schnittstelle zum Element <feTile>. Dieses Filterprimitiv nimmt ein Eingabebild (angegeben über das Attribut in) und wiederholt es horizontal und vertikal wie Kacheln, bis sein eigener Teilbereich (x, y, width, height) vollständig gefüllt ist. Wie groß eine einzelne Kachel ist, legt der Teilbereich des Eingabe-Primitivs fest, also nicht die Größe der Grafik selbst.

Das Interface erbt von SVGElement und bringt die Standard-Attribute für Filterprimitive mit (SVGFilterPrimitiveStandardAttributes): x, y, width, height (jeweils SVGAnimatedLength) und result (SVGAnimatedString). Die einzige eigene Eigenschaft ist in1, ein SVGAnimatedString, der das Attribut in widerspiegelt.

In der Praxis setzt man <feTile> ein, um aus einem kleinen Ausschnitt (z. B. einem <feFlood>, <feImage> oder <feOffset> mit begrenztem Teilbereich) ein flächiges Muster zu erzeugen, etwa Karo-, Streifen- oder Texturhintergründe, ohne ein <pattern> zu verwenden. Per JavaScript erzeugst du das Element mit document.createElementNS() im SVG-Namensraum und kannst anschließend Eingabe und Teilbereich dynamisch anpassen.

Parameter

Name	Typ	Default	Beschreibung
$in1	SVGAnimatedString	Ergebnis des vorherigen Primitivs bzw. SourceGraphic	Nur lesbar. Spiegelt das Attribut `in` wider. Über `in1.baseVal` liest oder setzt du die Eingabe, z. B. `"SourceGraphic"` oder den `result`-Namen eines anderen Primitivs.
$x / y	SVGAnimatedLength	0%	Nur lesbar. Position des Filterprimitiv-Teilbereichs (Attribute `x`, `y`).
$width / height	SVGAnimatedLength	100%	Nur lesbar. Größe des Teilbereichs, der mit Kacheln gefüllt wird.
$result	SVGAnimatedString		Nur lesbar. Name des Ergebnisses, auf das nachfolgende Primitive per `in` verweisen können.

Rückgabewert

Typ

SVGFETileElement

Beschreibung

Instanzen entstehen über document.createElementNS("http://www.w3.org/2000/svg", "feTile") oder durch Parsen von SVG-Markup. Ein direkter Konstruktoraufruf ist nicht möglich.

Beispiele

Kachelmuster-Filter per JavaScript erzeugen

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");

const filter = document.createElementNS(SVG_NS, "filter");
filter.id = "kacheln";
filter.setAttribute("filterUnits", "userSpaceOnUse");
filter.setAttribute("x", "0");
filter.setAttribute("y", "0");
filter.setAttribute("width", "200");
filter.setAttribute("height", "200");

// Kleine Kachel: 20×20 Pixel Farbfläche
const flood = document.createElementNS(SVG_NS, "feFlood");
flood.setAttribute("flood-color", "tomato");
flood.setAttribute("x", "0");
flood.setAttribute("y", "0");
flood.setAttribute("width", "15");
flood.setAttribute("height", "15");
flood.setAttribute("result", "kachel");

// Diese Kachel über den gesamten Filterbereich wiederholen
const tile = document.createElementNS(SVG_NS, "feTile");
tile.setAttribute("in", "kachel");

filter.append(flood, tile);
svg.querySelector("defs").append(filter);

svg.querySelector("rect").setAttribute("filter", "url(#kacheln)");
console.log(tile instanceof SVGFETileElement);

true

Eingabe und Teilbereich auslesen und ändern

const tile = document.querySelector("feTile");

console.log(tile.in1.baseVal);          // aktuelle Eingabe
console.log(tile.width.baseVal.valueAsString);

// Eingabe dynamisch umschalten
tile.in1.baseVal = "SourceGraphic";
console.log(tile.getAttribute("in"));

kachel 100% SourceGraphic

Alle feTile-Primitive eines Dokuments prüfen

const tiles = [...document.querySelectorAll("feTile")];

const ohneEingabe = tiles.filter((t) => !t.in1.baseVal);
console.log(`${tiles.length} feTile-Elemente, ${ohneEingabe.length} ohne explizites in-Attribut`);

1 feTile-Elemente, 0 ohne explizites in-Attribut

// Wichtig · Fallstricke

Kachelgröße: Die Größe einer Kachel ergibt sich aus dem Teilbereich des Eingabe-Primitivs. Ohne begrenzte x/y/width/height am Eingabe-Primitiv ist die Kachel so groß wie der ganze Filterbereich, und es ist keine Wiederholung zu sehen.
Namensraum: Mit document.createElement(\"feTile\") erzeugst du nur ein unbekanntes HTML-Element. Verwende immer createElementNS() mit http://www.w3.org/2000/svg.
Die Eigenschaft heißt in1 und nicht in, weil in in JavaScript ein reserviertes Wort ist. Schreibzugriffe laufen über in1.baseVal. in1 selbst ist nur lesbar.
Wählst du filterUnits bzw. primitiveUnits nicht passend (Standard: objectBoundingBox), werden Prozent- und Bruchwerte relativ zur Objektgröße interpretiert. Das führt schnell zu unerwarteten Kachelgrößen.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Aufwendige Filter mit großen Bereichen können beim Zeichnen Leistung kosten, besonders wenn sie animiert werden.

Siehe auch

SVGElement SVGFilterElement SVGFEFloodElement SVGFEOffsetElement SVGFEImageElement SVGAnimatedString Document.createElementNS()