SVGFEFloodElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGFEFloodElement.width

Beschreibung

Die Eigenschaft width des Interfaces SVGFEFloodElement steht für das Attribut width eines <feFlood>-Elements. Sie legt die Breite des Teilbereichs fest, den das Filterprimitiv innerhalb der Filterregion füllt. Zurückgegeben wird ein SVGAnimatedLength-Objekt, keine einfache Zahl.

Über baseVal lesen und setzen Sie den statischen Attributwert. animVal liefert den aktuellen, gegebenenfalls per SMIL animierten Wert und ist nur lesbar. Beide sind SVGLength-Objekte mit Eigenschaften wie value (in Benutzereinheiten), valueInSpecifiedUnits, valueAsString und unitType.

Fehlt das Attribut, gilt standardmäßig 100%. Das Primitiv deckt dann die gesamte Filterregion ab. Wie Prozentwerte ausgewertet werden, hängt vom Attribut primitiveUnits des umgebenden <filter> ab (userSpaceOnUse oder objectBoundingBox).

Die Eigenschaft ist nützlich, wenn Sie Filtereffekte per Skript dynamisch anpassen wollen, etwa um einen Farbfluter nur über einen Teil eines Elements zu legen oder die Breite interaktiv zu verändern.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbarer Basiswert als SVGLength) und animVal (nur lesbarer, animierter Wert als SVGLength).

Beispiele

Breite eines feFlood-Primitivs auslesen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="200" height="100">
    <filter id="flut" primitiveUnits="userSpaceOnUse">
      <feFlood id="flood" x="0" y="0" width="120" height="100" flood-color="tomato" />
    </filter>
    <rect width="200" height="100" filter="url(#flut)" />
  </svg>`);

const flood = document.getElementById('flood');
console.log(flood.width.baseVal.value);
console.log(flood.width.baseVal.valueAsString);

120 "120"

Breite per Skript ändern

const flood = document.querySelector('feFlood');

// Neuen Wert in Benutzereinheiten setzen
flood.width.baseVal.value = 60;
console.log(flood.getAttribute('width'));

// Mit Einheit setzen: Prozent
flood.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);
console.log(flood.getAttribute('width'));

"60" "50%"

Breite interaktiv mit einem Schieberegler steuern

const flood = document.querySelector('feFlood');
const slider = document.createElement('input');
slider.type = 'range';
slider.min = '0';
slider.max = '200';
slider.value = String(flood.width.baseVal.value);
document.body.append(slider);

slider.addEventListener('input', () => {
  flood.width.baseVal.value = Number(slider.value);
});

Standardwert ohne gesetztes Attribut

const ns = 'http://www.w3.org/2000/svg';
const f = document.createElementNS(ns, 'feFlood');
console.log(f.width.baseVal.valueAsString);
console.log(f.width.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);

"100%" true

// Wichtig · Fallstricke

Schreibgeschützt: flood.width = 50 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändern Sie den Wert über width.baseVal oder mit setAttribute('width', …).
animVal ist nur lesbar. Schreibversuche lösen eine NoModificationAllowedError-Ausnahme aus.
Bei Prozent- oder relativen Einheiten kann baseVal.value je nach Browser 0 oder einen umgerechneten Wert liefern, wenn noch kein Layout-Kontext existiert (z. B. bei Elementen, die nicht im Dokument hängen). Verlässlicher sind valueInSpecifiedUnits zusammen mit unitType.
Negative Werte sind ungültig und schalten den Filter ab. Der Wert 0 deaktiviert die Wirkung des Primitivs.
Die Eigenschaft funktioniert nur bei Elementen, die mit createElementNS im SVG-Namensraum erzeugt wurden. Mit document.createElement('feFlood') entsteht ein HTMLUnknownElement ohne width.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern seit Langem unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGFEFloodElement SVGFEFloodElement.height SVGFEFloodElement.x SVGFEFloodElement.y SVGAnimatedLength SVGLength HTMLSourceElement.width