SVGFEDisplacementMapElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEDisplacementMapElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFEDisplacementMapElement steht für das width-Attribut der Filterprimitive <feDisplacementMap>. Das Attribut legt zusammen mit x, y und height den Filterprimitiven-Teilbereich fest, also die rechteckige Fläche, in der das Ergebnis der Verschiebung berechnet und ausgegeben wird.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, man kann ihr also kein neues Objekt zuweisen. Über width.baseVal kommt man aber an eine veränderbare SVGLength und kann damit den Wert per Skript ändern. width.animVal liefert den aktuellen Wert, wie er gerade berechnet wird, auch während einer SMIL-Animation.

Fehlt das Attribut, gilt standardmäßig 100% des Filterbereichs. Ob Prozent- und Zahlenwerte relativ zum Filterbereich oder zur Bounding-Box des gefilterten Elements ausgewertet werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab (userSpaceOnUse oder objectBoundingBox).

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (veränderbare SVGLength, entspricht dem Attributwert) und animVal (schreibgeschützte SVGLength mit dem aktuellen, ggf. animierten Wert).

Beispiele

Breite der Filterprimitive auslesen

// HTML: <svg><filter id="f"><feDisplacementMap id="dm" in="SourceGraphic" in2="noise" scale="20" width="150"/></filter></svg>
const dm = document.getElementById('dm');

console.log(dm.width instanceof SVGAnimatedLength);
console.log(dm.width.baseVal.value);
console.log(dm.width.animVal.value);

true 150 150

Breite per Skript ändern über baseVal

const svgNS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(svgNS, 'filter');
filter.setAttribute('primitiveUnits', 'userSpaceOnUse');
const dm = document.createElementNS(svgNS, 'feDisplacementMap');
filter.append(dm);

// Die Zuweisung dm.width = ... hätte keine Wirkung, nur baseVal ist beschreibbar
dm.width.baseVal.value = 200;
console.log(dm.getAttribute('width'));

// Einheit gezielt setzen
dm.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(dm.getAttribute('width'));

200 50%

Wirkbereich des Verzerrungseffekts beim Hover vergrößern

const dm = document.querySelector('#wave feDisplacementMap');
const target = document.querySelector('#logo');

target.addEventListener('mouseenter', () => {
  dm.width.baseVal.valueAsString = '100%';
});
target.addEventListener('mouseleave', () => {
  dm.width.baseVal.valueAsString = '40%';
});

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie el.width = 100 wird ignoriert (im Strict Mode gibt es einen TypeError). Ändern lässt sich der Wert nur über el.width.baseVal oder setAttribute('width', …).
Nicht zu verwechseln mit der Breite des gefilterten Elements oder des <filter>-Elements (SVGFilterElement.width). Hier geht es nur um den Teilbereich der einzelnen Primitive. Pixel, die außerhalb dieses Bereichs liegen, werden von der Primitive transparent ausgegeben.
Negative Werte sind ein Fehler, 0 schaltet die Primitive ab. In beiden Fällen kann der ganze Filter wirkungslos werden.
Prozentangaben in baseVal.value werden erst in Benutzereinheiten umgerechnet, wenn ein Bezugsrahmen existiert. Bei Elementen, die noch nicht im Dokument hängen, kann das Auslesen daher 0 ergeben oder einen Fehler werfen. Verlässlicher ist dann valueInSpecifiedUnits.
Wird von allen modernen Browsern unterstützt. Das Verhalten ist dasselbe wie bei den width-Eigenschaften der anderen SVGFE*Element-Interfaces.

Siehe auch

SVGFEDisplacementMapElement SVGFEDisplacementMapElement.height SVGFEDisplacementMapElement.x SVGFEDisplacementMapElement.y SVGAnimatedLength SVGLength