Signatur
Beschreibung
Die Eigenschaft height gehört zur Schnittstelle SVGFEComponentTransferElement und entspricht dem Attribut height des Elements <feComponentTransfer>. Zusammen mit x, y und width legt sie den Filterprimitiv-Teilbereich fest. Das ist das Rechteck, in dem die Primitive ihr Ergebnis berechnet und ausgibt.
Die Eigenschaft selbst ist schreibgeschützt: Sie lässt sich nicht durch ein anderes Objekt ersetzen. Sie liefert aber ein SVGAnimatedLength-Objekt mit zwei Teilen: baseVal ist der statische Grundwert und lässt sich ändern. animVal ist der aktuelle, eventuell animierte Wert und kann nur gelesen werden. Beide sind SVGLength-Objekte, zum Beispiel mit value, valueInSpecifiedUnits, unitType und convertToSpecifiedUnits().
Fehlt das Attribut, gilt standardmäßig 100% der Höhe des Filterbereichs. Wie Prozentwerte und Zahlen ausgelegt werden, hängt vom Attribut primitiveUnits des umgebenden <filter>-Elements ab: userSpaceOnUse (Standard) oder objectBoundingBox.
Man braucht die Eigenschaft vor allem, um Filter per Skript auszulesen oder dynamisch anzupassen. Ein Beispiel ist ein Farbkorrektur-Effekt, der nur auf einen Teil der Grafik wirken soll.
Rückgabewert
baseVal (änderbare SVGLength) und animVal (schreibgeschützte, aktuell animierte SVGLength) für die Höhe des Filterprimitiv-Teilbereichs.Beispiele
Höhe einer feComponentTransfer-Primitive auslesen
// HTML: <svg><filter id="f"><feComponentTransfer id="ct" height="120"><feFuncR type="linear" slope="1.5"/></feComponentTransfer></filter></svg>
const ct = document.getElementById('ct');
const { baseVal, animVal } = ct.height;
console.log(baseVal.value); // Grundwert in Benutzereinheiten
console.log(animVal.value); // aktueller (ggf. animierter) Wert
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);Höhe dynamisch per baseVal ändern
const svgNS = 'http://www.w3.org/2000/svg';
const filter = document.createElementNS(svgNS, 'filter');
filter.id = 'helligkeit';
const ct = document.createElementNS(svgNS, 'feComponentTransfer');
const funcG = document.createElementNS(svgNS, 'feFuncG');
funcG.setAttribute('type', 'gamma');
funcG.setAttribute('exponent', '0.5');
ct.append(funcG);
filter.append(ct);
document.querySelector('svg defs').append(filter);
// Effekt nur auf die oberen 50 Benutzereinheiten beschränken
ct.height.baseVal.value = 50;
console.log(ct.getAttribute('height'));Prozentwert setzen und Einheit prüfen
const ct = document.querySelector('feComponentTransfer');
// Höhe auf 50 % des Filterbereichs setzen
ct.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(ct.getAttribute('height'));
console.log(ct.height.baseVal.valueInSpecifiedUnits);// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
ct.height = 100bleibt ohne Wirkung (im Strict Mode wirft sie einenTypeError). Ändern Sie stattdessenct.height.baseVal.valueoder das Attribut persetAttribute('height', …). animValist immer schreibgeschützt. Schreibversuche lösen eineNoModificationAllowedError-Ausnahme aus.- Bei Prozentwerten kann das Lesen von
baseVal.valueein unerwartetes Ergebnis liefern, weil sich der Bezugsrahmen aus dem Filterbereich undprimitiveUnitsergibt. MitvalueInSpecifiedUnitsundunitTypelesen Sie den tatsächlich angegebenen Wert aus. - Ein Wert von
0oder ein negativer Wert schaltet den Effekt der Primitive ab: Das Ergebnis ist dann ein leeres, transparentes Bild. - SVG-Elemente müssen mit
document.createElementNS()und dem SVG-Namensraum erzeugt werden, sonst gibt es die Eigenschaft nicht. - Kompatibilität: Alle modernen Browser unterstützen die Eigenschaft seit Langem (Chrome, Firefox, Safari, Edge).