SVGLength.valueInSpecifiedUnits — Eigenschaft · JavaScript-Referenz

Signatur

SVGLength.valueInSpecifiedUnits

Beschreibung

Die Eigenschaft valueInSpecifiedUnits eines SVGLength-Objekts enthält den reinen Zahlenwert einer Länge, und zwar in der Einheit, in der die Länge angegeben wurde. Bei einem Attribut wie width="50%" ist der Wert 50, bei r="2.5em" ist er 2.5. Welche Einheit gemeint ist, steht in unitType, z. B. SVGLength.SVG_LENGTHTYPE_PERCENTAGE.

Anders arbeitet value: Diese Eigenschaft liefert die Länge immer in Benutzereinheiten (in der Praxis Pixel), also schon umgerechnet. valueAsString gibt Zahl und Einheit zusammen als Text zurück, etwa "50%". Mit valueInSpecifiedUnits ändert man also nur die Zahl, die Einheit bleibt gleich. Das ist praktisch, wenn z. B. eine prozentuale Breite prozentual bleiben soll.

Wenn Sie den Wert setzen, ändert sich das zugehörige Attribut im DOM sofort mit. Das gilt aber nur für veränderbare Längen, also für die baseVal einer SVGAnimatedLength. Die animVal ist schreibgeschützt.

Rückgabewert

Typ

number

Beschreibung

Gleitkommazahl in der durch unitType angegebenen Einheit. Die Eigenschaft ist lesbar und schreibbar, außer bei schreibgeschützten Längen wie animVal.

Beispiele

Zahlenwert und Einheit auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width', '50%');
svg.append(rect);
document.body.append(svg);

const width = rect.width.baseVal;
console.log(width.valueInSpecifiedUnits);
console.log(width.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(width.valueAsString);

50 true 50%

Wert ändern, Einheit behalten

const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', '2em');

const r = circle.r.baseVal;
r.valueInSpecifiedUnits *= 1.5; // Radius um 50 % vergrößern

console.log(circle.getAttribute('r'));

3em

Unterschied zu value (Pixel)

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x2', '2in');
svg.append(line);
document.body.append(svg);

const x2 = line.x2.baseVal;
console.log(x2.valueInSpecifiedUnits); // in Zoll
console.log(x2.value);                 // in Benutzereinheiten (96 px pro Zoll)

2 192

Längenwert schrittweise animieren

const rect = document.querySelector('rect');
const w = rect.width.baseVal;

const grow = () => {
  if (w.valueInSpecifiedUnits < 80) {
    w.valueInSpecifiedUnits += 1;
    requestAnimationFrame(grow);
  }
};
requestAnimationFrame(grow);

// Wichtig · Fallstricke

Schreibschutz: Wenn Sie den Wert einer animVal-Länge oder einer anderen schreibgeschützten Länge setzen, wird eine DOMException mit dem Namen NoModificationAllowedError ausgelöst. Schreiben Sie stattdessen in baseVal.
Ungültige Zahlen: Wenn Sie NaN oder Infinity zuweisen, wird ein TypeError ausgelöst.
Einheit wird nicht umgerechnet: Wenn Sie den Wert setzen, bleibt unitType unverändert. Um die Einheit zu wechseln, nehmen Sie convertToSpecifiedUnits() oder newValueSpecifiedUnits().
Einheitenlose Werte: Bei Angaben ohne Einheit (SVG_LENGTHTYPE_NUMBER) sind valueInSpecifiedUnits und value gleich.
Nicht mit CSS verwechseln: Die Eigenschaft bezieht sich nur auf das Attribut. Werte, die per CSS gesetzt wurden (etwa die Eigenschaft width auf einem <rect>), sind hier nicht enthalten.
Browser-Unterstützung: Die Eigenschaft wird in allen modernen Browsern unterstützt. Sie ist Teil von SVG 1.1 und SVG 2.

Siehe auch

SVGLength SVGLength.value SVGLength.valueAsString SVGLength.unitType SVGAnimatedLength