Signatur
Beschreibung
Die Eigenschaft href des Interfaces SVGFEImageElement gibt ein SVGAnimatedString-Objekt zurück. Es spiegelt das Attribut href (oder das ältere xlink:href) eines <feImage>-Elements wider. Dieses Attribut legt fest, welche Grafik der Filter-Primitiv lädt: eine externe Bilddatei (PNG, JPEG, SVG), eine Data-URL oder ein Fragmentverweis wie #logo auf ein Element im selben Dokument.
Schreibgeschützt ist nur die Eigenschaft selbst. Ein neues Objekt lässt sich nicht zuweisen. Über href.baseVal können Sie den Attributwert aber lesen und ändern. href.animVal liefert den aktuellen Wert, auch während einer SMIL-Animation (<animate>/<set>).
Typische Einsätze: in einem SVG-Filter das Eingangsbild zur Laufzeit wechseln, etwa für Texturen, Displacement-Maps oder Überblendungen. Auch beim Auswerten oder Prüfen bestehender Filterdefinitionen ist die Eigenschaft nützlich.
Rückgabewert
baseVal (lesbar und schreibbar, entspricht dem Attributwert) und animVal (schreibgeschützt, der aktuell animierte Wert).Beispiele
Bildquelle eines feImage auslesen
// <svg><filter id="tex"><feImage id="img" href="textur.png"/></filter></svg>
const feImage = document.getElementById('img');
console.log(feImage.href.baseVal);
console.log(feImage.href.animVal);Filtertextur zur Laufzeit wechseln
const feImage = document.querySelector('#tex feImage');
const texturen = ['holz.png', 'stein.png', 'papier.png'];
let index = 0;
document.getElementById('wechseln').addEventListener('click', () => {
index = (index + 1) % texturen.length;
// baseVal schreiben ändert das href-Attribut
feImage.href.baseVal = texturen[index];
console.log(feImage.getAttribute('href'));
});feImage dynamisch erzeugen und auf internes Element verweisen
const SVG_NS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'logoFilter';
const feImage = document.createElementNS(SVG_NS, 'feImage');
feImage.href.baseVal = '#logo'; // Fragmentverweis auf <g id="logo">
filter.append(feImage);
document.querySelector('svg defs').append(filter);
console.log(feImage.href.baseVal, feImage instanceof SVGFEImageElement);// Wichtig · Fallstricke
- Kein direkter String:
feImage.hrefist einSVGAnimatedString, kein String. Die ZuweisungfeImage.href = 'x.png'bewirkt nichts bzw. wirft im Strict Mode einen Fehler. Verwenden Siehref.baseValodersetAttribute('href', …). - href vs. xlink:href:
xlink:hrefist seit SVG 2 veraltet. Sind beide Attribute gesetzt, hathrefVorrang. Für das ältere Attribut istsetAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', …)nötig. - CORS und Sicherheit: Externe Bilder unterliegen der Same-Origin-Policy. Bilder anderer Herkunft können den Filter „verunreinigen“ (tainting), etwa wenn das Ergebnis später in ein Canvas gezeichnet wird. Die Direktiven
img-srcunddefault-srceiner CSP gelten auch hier. - Fragmentverweise: Verweise auf Elemente (
#id) in<feImage>werden in Firefox nur eingeschränkt unterstützt. Das Rendering kann daher von Browser zu Browser abweichen. - Die Eigenschaft selbst wird von allen modernen Browsern unterstützt.
animValspiegelt SMIL-Animationen wider, CSS-Animationen dagegen nicht.