Signatur
Beschreibung
Die Eigenschaft href von SVGPatternElement spiegelt das Attribut href (SVG 2) bzw. das ältere xlink:href (SVG 1.1) eines <pattern>-Elements wider. Sie stammt aus dem Mixin SVGURIReference und gibt ein SVGAnimatedString-Objekt zurück, keinen einfachen String.
Über href kann ein Muster auf ein anderes <pattern> verweisen. Dann übernimmt es von dort alle Attribute, die es selbst nicht setzt (z. B. width, height, patternUnits, patternTransform, viewBox), und auch die Kindelemente, falls es selbst keine hat. So baust du Varianten eines Grundmusters, ohne den Inhalt zu kopieren. Zum Beispiel ein gedrehtes oder skaliertes Muster.
Die Eigenschaft selbst ist schreibgeschützt: pattern.href = "..." ändert nichts. Das Unterobjekt baseVal kannst du aber beschreiben, um den Verweis zur Laufzeit zu ändern. animVal liefert den aktuell wirksamen Wert, auch während einer SMIL-Animation.
Rückgabewert
baseVal (beschreibbarer String, Attributwert) und animVal (schreibgeschützter String, aktuell animierter Wert). Ist kein Attribut gesetzt, sind beide leere Strings.Beispiele
Verweis eines Musters auslesen
document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="100">
<defs>
<pattern id="punkte" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="2" fill="steelblue"/>
</pattern>
<pattern id="punkteGedreht" href="#punkte" patternTransform="rotate(45)"/>
</defs>
<rect width="200" height="100" fill="url(#punkteGedreht)"/>
</svg>`);
const pattern = document.getElementById('punkteGedreht');
console.log(pattern.href instanceof SVGAnimatedString);
console.log(pattern.href.baseVal);
console.log(pattern.href.animVal);Grundmuster zur Laufzeit wechseln
document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="100">
<defs>
<pattern id="streifen" width="8" height="8" patternUnits="userSpaceOnUse">
<rect width="4" height="8" fill="tomato"/>
</pattern>
<pattern id="karos" width="8" height="8" patternUnits="userSpaceOnUse">
<rect width="4" height="4" fill="seagreen"/>
</pattern>
<pattern id="aktiv" href="#streifen"/>
</defs>
<rect width="200" height="100" fill="url(#aktiv)"/>
</svg>`);
const aktiv = document.getElementById('aktiv');
// Die Eigenschaft href selbst ist schreibgeschützt, baseVal aber nicht
const umschalten = () => {
aktiv.href.baseVal = aktiv.href.baseVal === '#streifen' ? '#karos' : '#streifen';
console.log('Neues Muster:', aktiv.href.baseVal);
};
umschalten();
console.log(aktiv.getAttribute('href'));Vererbungskette von Mustern verfolgen
// Setzt ein SVG mit verketteten <pattern>-Elementen voraus (wie in Beispiel 1)
const resolveChain = (pattern) => {
const chain = [];
const seen = new Set();
let current = pattern;
while (current instanceof SVGPatternElement && !seen.has(current)) {
seen.add(current);
chain.push(current.id);
const ref = current.href.baseVal;
if (!ref.startsWith('#')) break; // externe Verweise ignorieren
current = document.getElementById(ref.slice(1));
}
return chain;
};
console.log(resolveChain(document.getElementById('punkteGedreht')));// Wichtig · Fallstricke
- Kein String:
pattern.hrefist einSVGAnimatedString. Vergleiche wiepattern.href === '#a'sind immerfalse. Nutzepattern.href.baseVal. - Nicht direkt zuweisbar:
pattern.href = '#x'wird ignoriert, im Strict Mode wirft es einenTypeError. Schreibe stattdessen inhref.baseValoder nutzesetAttribute('href', …). - href vs. xlink:href: Sind beide Attribute gesetzt, hat
hrefVorrang. Für sehr alte Browser (z. B. Safari vor Version 12) warxlink:hrefnötig. Setzen kannst du es mitsetAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', …). - Zyklische Verweise (A → B → A) sind ungültig. Browser brechen die Auflösung dann ab, und das Muster wird nicht oder falsch gezeichnet.
- Verweise auf Muster in externen Dateien werden oft nicht unterstützt oder durch CORS blockiert. Verweise am besten nur innerhalb desselben Dokuments.
- Das Ziel muss selbst ein
<pattern>sein. Verweise auf andere Elemente werden ignoriert.