SVGFEBlendElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEBlendElement.width

Beschreibung

Die Eigenschaft width der Schnittstelle SVGFEBlendElement gibt die horizontale Ausdehnung des Teilbereichs des Filterprimitivs zurück (filter primitive subregion). Sie entspricht dem Attribut width des Elements <feBlend> und stammt aus dem Mixin SVGFilterPrimitiveStandardAttributes, das auch x, y, height und result bereitstellt.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Dessen baseVal enthält den im Markup bzw. per Skript gesetzten Wert, animVal den aktuellen, gegebenenfalls durch SMIL-Animationen veränderten Wert. Beide sind SVGLength-Objekte mit Eigenschaften wie value, valueInSpecifiedUnits und unitType.

Die Eigenschaft selbst ist schreibgeschützt. Ändern lässt sich die Breite aber über width.baseVal.value, baseVal.newValueSpecifiedUnits() oder direkt über setAttribute("width", …). Nützlich ist das, wenn man den Wirkungsbereich eines Überblendeffekts dynamisch einschränken oder auslesen will, etwa für interaktive Filtereditoren.

Fehlt das Attribut, gilt standardmäßig 100% der Filterregion. Wie Prozentwerte aufgelöst werden, hängt vom primitiveUnits-Attribut des übergeordneten <filter> ab.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Basiswert, beschreibbar) und animVal (animierter Wert, nur lesbar), beide vom Typ SVGLength.

Beispiele

Breite eines feBlend-Primitivs auslesen

// HTML: <svg><filter id="f"><feBlend id="blend" in="SourceGraphic" in2="BackgroundImage" mode="multiply" width="150"/></filter></svg>
const blend = document.getElementById("blend");

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

true 150 150

Breite per Skript ändern

const blend = document.querySelector("feBlend");

// Neuer Wert in Benutzereinheiten
blend.width.baseVal.value = 80;
console.log(blend.getAttribute("width"));

// Wert in Prozent setzen
blend.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(blend.getAttribute("width"));

80 50%

feBlend dynamisch erzeugen und Einheit prüfen

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
const filter = document.createElementNS(SVG_NS, "filter");
filter.id = "blendFilter";

const blend = document.createElementNS(SVG_NS, "feBlend");
blend.setAttribute("in", "SourceGraphic");
blend.setAttribute("mode", "screen");
blend.setAttribute("width", "75%");

filter.append(blend);
svg.append(filter);
document.body.append(svg);

const { unitType, valueInSpecifiedUnits } = blend.width.baseVal;
console.log(unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE, valueInSpecifiedUnits);

true 75

// Wichtig · Fallstricke

Da width schreibgeschützt ist, wird die Zuweisung blend.width = 100 im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Ändern Sie stattdessen width.baseVal.
Bei Prozentwerten oder relativen Einheiten kann baseVal.value einen umgerechneten Wert in Benutzereinheiten liefern oder, wenn das Element nicht gerendert wird, einen Fehler auslösen. Für die Originalangabe ist valueInSpecifiedUnits zuverlässiger.
Ein negativer Wert oder 0 deaktiviert das Filterprimitiv: Das Ergebnis ist dann transparent.
SVG-Elemente müssen mit createElementNS und dem SVG-Namensraum erzeugt werden, sonst gibt es die Eigenschaft width als SVGAnimatedLength nicht.
Die Eigenschaft wird von allen aktuellen Browsern unterstützt. Den Modus BackgroundImage als Eingabe (in2) unterstützen die meisten Browser dagegen nicht.

Siehe auch

SVGFEBlendElement SVGFEBlendElement.height SVGFEBlendElement.x SVGFEBlendElement.y SVGAnimatedLength SVGLength HTMLObjectElement.width