SVGFEOffsetElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEOffsetElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFEOffsetElement gibt das width-Attribut eines <feOffset>-Elements als SVGAnimatedLength-Objekt zurück. Sie legt die horizontale Ausdehnung des Filter-Primitive-Teilbereichs (filter primitive subregion) fest, also den Bereich, in dem das Ergebnis dieser Filterstufe berechnet und abgeschnitten wird.

Die Eigenschaft selbst kann nicht neu zugewiesen werden. Den Wert ändert man über das enthaltene SVGLength-Objekt: width.baseVal ist der Wert aus dem Attribut und lässt sich beschreiben, width.animVal ist der aktuell wirksame, eventuell durch SMIL-Animation veränderte Wert und nur lesbar.

Fehlt das Attribut, gilt standardmäßig 100% des Filterbereichs. Wie Prozentwerte und Zahlen ausgewertet werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox). Praktisch nutzt man width zusammen mit x, y und height, damit z. B. ein verschobener Schatten nicht über einen bestimmten Bereich hinausragt.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt mit baseVal (beschreibbarer Grundwert als SVGLength) und animVal (nur lesbarer, animierter Wert).

Beispiele

Breite eines feOffset-Elements auslesen

// <svg><filter id="schatten"><feOffset id="versatz" dx="4" dy="4" width="120"/></filter></svg>
const offset = document.getElementById('versatz');

console.log(offset.width instanceof SVGAnimatedLength);
console.log(offset.width.baseVal.value);
console.log(offset.width.baseVal.valueAsString);

true 120 120

Breite zur Laufzeit ändern

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const filter = document.createElementNS(svgNS, 'filter');
filter.id = 'versatzFilter';
filter.setAttribute('filterUnits', 'userSpaceOnUse');
filter.setAttribute('primitiveUnits', 'userSpaceOnUse');

const feOffset = document.createElementNS(svgNS, 'feOffset');
feOffset.setAttribute('dx', '10');
filter.append(feOffset);
svg.append(filter);
document.body.append(svg);

// Über baseVal setzen, nicht über width selbst
feOffset.width.baseVal.value = 200;
console.log(feOffset.getAttribute('width'));

200

Prozentwert mit Einheit setzen

const feOffset = document.querySelector('feOffset');

// Wert und Einheit gemeinsam setzen
feOffset.width.baseVal.newValueSpecifiedUnits(
  SVGLength.SVG_LENGTHTYPE_PERCENTAGE,
  50
);

console.log(feOffset.width.baseVal.valueAsString);
console.log(feOffset.width.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

50% true

// Wichtig · Fallstricke

Schreibgeschützt: feOffset.width = 100 schlägt ohne Fehlermeldung fehl bzw. wirft im Strict Mode einen TypeError. Ändern Sie stattdessen width.baseVal.value oder setzen Sie das Attribut mit setAttribute('width', …).
Fehlendes Attribut: Ohne width-Attribut liefert baseVal einen Standardwert (effektiv 100%). baseVal.value kann dabei abhängig vom Kontext 0 oder einen berechneten Wert ergeben. Prüfen Sie im Zweifel mit hasAttribute('width').
Einheiten: Prozentwerte lassen sich nur dann in absolute Werte umrechnen, wenn das Element im gerenderten Dokument hängt. Sonst kann das Lesen von value ungenaue Ergebnisse liefern.
animVal ist nur lesbar. Schreiben löst eine NoModificationAllowedError-DOMException aus.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Andere Filter-Primitive wie SVGFEGaussianBlurElement bieten dieselbe Eigenschaft über das gemeinsame Mixin SVGFilterPrimitiveStandardAttributes.

Siehe auch

SVGFEOffsetElement SVGFEOffsetElement.height SVGFEOffsetElement.x SVGFEOffsetElement.y SVGFEOffsetElement.dx SVGAnimatedLength SVGLength