SVGFESpecularLightingElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFESpecularLightingElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFESpecularLightingElement gibt das Attribut width des Elements <feSpecularLighting> zurück. Das Attribut legt die Breite des Filterprimitiv-Teilbereichs fest. Das ist der rechteckige Bereich, auf den das Ergebnis der Glanzlicht-Berechnung (Phong-Beleuchtungsmodell) beschränkt wird.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Über baseVal erreichst du den im Markup gesetzten Grundwert, animVal liefert den aktuellen Wert, der sich durch eine laufende SMIL-Animation ändern kann. Beide sind SVGLength-Objekte mit Eigenschaften wie value (in Benutzereinheiten), valueInSpecifiedUnits, valueAsString und unitType.

Die Eigenschaft selbst kann nicht neu zugewiesen werden. Den Wert änderst du aber über width.baseVal.value, newValueSpecifiedUnits() oder mit setAttribute('width', …). Fehlt das Attribut, gilt standardmäßig 100% des Filterbereichs. Wie Prozentwerte aufgelöst werden, hängt vom Attribut primitiveUnits des übergeordneten <filter>-Elements ab.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal und animVal (jeweils vom Typ SVGLength) für die Breite des Filterprimitiv-Teilbereichs.

Beispiele

Breite eines Glanzlicht-Filters auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.innerHTML = `
  <filter id="glanz" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feSpecularLighting id="licht" width="120" height="80" specularExponent="20">
      <fePointLight x="50" y="50" z="100" />
    </feSpecularLighting>
  </filter>`;
document.body.append(svg);

const licht = svg.querySelector('#licht');
console.log(licht.width instanceof SVGAnimatedLength);
console.log(licht.width.baseVal.value);
console.log(licht.width.baseVal.valueAsString);

true 120 120

Breite zur Laufzeit ändern

const licht = document.querySelector('feSpecularLighting');

// Wert in Benutzereinheiten setzen
licht.width.baseVal.value = 150;
console.log(licht.getAttribute('width'));

// Wert in Prozent setzen
licht.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(licht.width.baseVal.valueAsString);

150 50%

Einheitentyp prüfen

const licht = document.querySelector('feSpecularLighting');
licht.setAttribute('width', '10mm');

const len = licht.width.baseVal;
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_MM);
console.log(len.valueInSpecifiedUnits);
console.log(len.value.toFixed(2)); // umgerechnet in px

true 10 37.80

// Wichtig · Fallstricke

Die Eigenschaft ist schreibgeschützt: licht.width = 100 bewirkt nichts und wirft im Strict Mode einen TypeError. Ändere stattdessen width.baseVal.
animVal ist ebenfalls schreibgeschützt und kann sich während einer SMIL-Animation von baseVal unterscheiden.
Ohne width-Attribut liefert baseVal den Standardwert 100%. Das Attribut ist dann aber nicht im DOM vorhanden, getAttribute('width') gibt also null zurück.
Prozentwerte werden abhängig von primitiveUnits des <filter>-Elements aufgelöst. Bei objectBoundingBox werden Zahlen als Anteil der Bounding Box verstanden, zum Beispiel 0.5.
Negative Werte sind ein Fehler. Ein Wert von 0 schaltet die Wirkung des Primitivs ab.
SVG-Elemente musst du mit createElementNS und dem SVG-Namensraum erzeugen, sonst gibt es die Eigenschaft nicht.
Die Eigenschaft wird von allen aktuellen Browsern unterstützt. Sie ist Teil von SVGFilterPrimitiveStandardAttributes.

Siehe auch

SVGFESpecularLightingElement SVGFESpecularLightingElement.height SVGFESpecularLightingElement.x SVGFESpecularLightingElement.y SVGAnimatedLength SVGLength