Signatur
Beschreibung
Die schreibgeschützte Eigenschaft stitchTiles der Schnittstelle SVGFETurbulenceElement gibt ein SVGAnimatedEnumeration-Objekt zurück. Es spiegelt das SVG-Attribut stitchTiles des Elements <feTurbulence> wider. Das Attribut legt fest, ob der Browser versucht, an den Kacheln des Rauschmusters nahtlose Übergänge zu erzeugen.
Der Wert ist eine Zahl, die einer Konstante der Schnittstelle entspricht:
SVGFETurbulenceElement.SVG_STITCHTYPE_UNKNOWN(0): Wert unbekannt oder ungültig.SVGFETurbulenceElement.SVG_STITCHTYPE_STITCH(1): entsprichtstitchTiles="stitch". Die Basisfrequenzen werden so angepasst, dass sich Kachelränder nahtlos zusammenfügen.SVGFETurbulenceElement.SVG_STITCHTYPE_NOSTITCH(2): entsprichtstitchTiles="noStitch"(Standardwert). Es wird nicht versucht, die Kacheln nahtlos anzuschließen.
Schreibgeschützt ist nur die Eigenschaft selbst, das Objekt also. Über stitchTiles.baseVal lässt sich der Wert trotzdem lesen und setzen, dabei wird das Attribut im DOM aktualisiert. stitchTiles.animVal enthält den aktuellen Wert inklusive SMIL-Animationen und ist nur lesbar. Sinnvoll ist das zum Beispiel für prozedurale Hintergrundtexturen, die sich als Kachelmuster wiederholen sollen.
Rückgabewert
baseVal (lesbar und schreibbar, number) und animVal (nur lesbar, number). Die Werte entsprechen den Konstanten SVG_STITCHTYPE_*.Beispiele
Aktuellen stitchTiles-Wert auslesen
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.innerHTML = `
<filter id="noise">
<feTurbulence baseFrequency="0.05" numOctaves="2" stitchTiles="stitch" />
</filter>`;
document.body.append(svg);
const turb = svg.querySelector('feTurbulence');
console.log(turb.stitchTiles.baseVal);
console.log(turb.stitchTiles.baseVal === SVGFETurbulenceElement.SVG_STITCHTYPE_STITCH);Zahlenwert in lesbaren Namen übersetzen
const stitchName = (el) => {
switch (el.stitchTiles.animVal) {
case SVGFETurbulenceElement.SVG_STITCHTYPE_STITCH: return 'stitch';
case SVGFETurbulenceElement.SVG_STITCHTYPE_NOSTITCH: return 'noStitch';
default: return 'unbekannt';
}
};
const turb = document.createElementNS('http://www.w3.org/2000/svg', 'feTurbulence');
// Attribut fehlt -> Standardwert noStitch
console.log(stitchName(turb));Nahtloses Kacheln per Checkbox umschalten
// HTML: <input type="checkbox" id="seamless"> und ein SVG mit <feTurbulence id="turb">
const turb = document.getElementById('turb');
const checkbox = document.getElementById('seamless');
checkbox.addEventListener('change', () => {
turb.stitchTiles.baseVal = checkbox.checked
? SVGFETurbulenceElement.SVG_STITCHTYPE_STITCH
: SVGFETurbulenceElement.SVG_STITCHTYPE_NOSTITCH;
// Das DOM-Attribut wird automatisch aktualisiert
console.log(turb.getAttribute('stitchTiles'));
});// Wichtig · Fallstricke
- Nicht direkt zuweisen:
turb.stitchTiles = 1hat keine Wirkung (im Strict Mode gibt es einenTypeError). Setzen Sie stattdessenstitchTiles.baseValoder nutzen SiesetAttribute('stitchTiles', 'stitch'). - Ungültige Werte: Wenn Sie
baseValauf0(SVG_STITCHTYPE_UNKNOWN) oder eine unbekannte Zahl setzen, werfen Browser einen Fehler (je nach ImplementierungTypeErroroderNotSupportedError). Ein ungültiger Attributwert im Markup wird dagegen wie der StandardwertnoStitchbehandelt. - Schreibweise: Das Attribut unterscheidet Groß- und Kleinschreibung (
stitchTiles,noStitch). BeisetAttributeauf SVG-Elementen müssen Sie die camelCase-Schreibweise exakt einhalten. - Visueller Effekt:
stitchpasst die Basisfrequenz leicht an die Kachelgröße an. Das Muster kann sich dadurch minimal verändern. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari).