SVGFilterElement.href — Eigenschaft · JavaScript-Referenz

Signatur

SVGFilterElement.href

Beschreibung

Die Eigenschaft href der Schnittstelle SVGFilterElement stammt aus dem Mixin SVGURIReference. Sie spiegelt das Attribut href (bzw. das ältere xlink:href) eines <filter>-Elements wider. Über dieses Attribut kann ein Filter auf einen anderen Filter im selben oder in einem externen Dokument verweisen. Dabei übernimmt er dessen Attribute und Filter-Primitiven, sofern er selbst keine festlegt.

Der Rückgabewert ist kein einfacher String. Du bekommst ein SVGAnimatedString-Objekt mit zwei Werten:

baseVal: der im Markup gesetzte Wert. Du kannst ihn lesen und schreiben.
animVal: der aktuell wirksame, eventuell animierte Wert. Diesen Wert kannst du nur lesen.

Die Eigenschaft selbst ist schreibgeschützt, du kannst also kein neues Objekt zuweisen. Den Verweis änderst du über href.baseVal oder mit setAttribute('href', …). Praktisch ist die Eigenschaft, wenn du Filter-Vorlagen dynamisch wiederverwenden, Verweise prüfen oder zur Laufzeit auf eine andere Filterdefinition umschalten willst.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (Wert aus dem Markup, les- und schreibbar) und animVal (wirksamer Wert, nur lesbar). Ohne gesetztes Attribut sind beide ein leerer String "".

Beispiele

Verweis eines Filters auslesen

// <svg>
//   <filter id="basis"><feGaussianBlur stdDeviation="3"/></filter>
//   <filter id="abgeleitet" href="#basis"/>
// </svg>
const filter = document.querySelector('#abgeleitet');

console.log(filter.href instanceof SVGAnimatedString);
console.log(filter.href.baseVal);
console.log(filter.href.animVal);

true #basis #basis

Filter-Vorlage zur Laufzeit umschalten

// Zwei Vorlagen: #weich und #stark; der wirksame Filter #aktiv verweist auf eine davon
const aktiv = document.querySelector('#aktiv');
const schalter = document.querySelector('#staerke');

schalter.addEventListener('change', () => {
  // baseVal ist schreibbar – ändert das href-Attribut
  aktiv.href.baseVal = schalter.checked ? '#stark' : '#weich';
  console.log(aktiv.getAttribute('href'));
});

#stark (bzw. #weich, je nach Checkbox)

Verweis erzeugter Filter prüfen

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

const filter = document.createElementNS(SVG_NS, 'filter');
filter.id = 'kopie';
filter.setAttribute('href', '#basis');
svg.append(filter);

// Existiert das referenzierte Ziel überhaupt?
const zielId = filter.href.baseVal.replace(/^#/, '');
const ziel = document.getElementById(zielId);
console.log(ziel instanceof SVGFilterElement ? 'Verweis gültig' : 'Verweis ins Leere');

Verweis gültig

// Wichtig · Fallstricke

Kein String: filter.href liefert ein SVGAnimatedString. Vergleiche wie filter.href === '#basis' ergeben deshalb immer false. Vergleiche stattdessen href.baseVal.
Zuweisung ohne Wirkung: filter.href = '#x' wird im nicht-strikten Modus stillschweigend ignoriert und löst im Strict Mode einen TypeError aus. Weise den neuen Wert immer an href.baseVal zu.
href und xlink:href: SVG 2 bevorzugt href. Sind beide Attribute gesetzt, gilt href. xlink:href ist veraltet, wird aus Kompatibilitätsgründen aber weiter unterstützt. Willst du es per Skript setzen, brauchst du setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', …).
Vererbung: Ein Filter übernimmt die Primitiven der Vorlage nur, wenn er selbst keine Kind-Primitiven hat. Das Verhalten beim Verweisen auf externe Dokumente ist nicht in allen Browsern gleich zuverlässig. Außerdem gelten dabei Same-Origin- bzw. CORS-Beschränkungen.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt. animVal weicht nur bei SMIL-Animationen von baseVal ab.

Siehe auch

SVGFilterElement SVGAnimatedString SVGFilterElement.filterUnits SVGFilterElement.primitiveUnits Element.prototype.setAttribute() HTMLTableSectionElement.chOff