SVGLength.unitType — Eigenschaft · JavaScript-Referenz

Signatur

SVGLength.unitType

Beschreibung

Die Eigenschaft unitType eines SVGLength-Objekts gibt an, in welcher Einheit die Länge ursprünglich angegeben wurde. Der Wert ist eine Ganzzahl vom Typ unsigned short. Er entspricht einer der statischen Konstanten des Interfaces, etwa SVGLength.SVG_LENGTHTYPE_PX (5) oder SVGLength.SVG_LENGTHTYPE_PERCENTAGE (2).

Mögliche Werte:

0 – SVG_LENGTHTYPE_UNKNOWN (unbekannte oder nicht abbildbare Einheit)
1 – SVG_LENGTHTYPE_NUMBER (reine Zahl ohne Einheit, gilt als Benutzereinheit)
2 – SVG_LENGTHTYPE_PERCENTAGE (%)
3 – SVG_LENGTHTYPE_EMS (em)
4 – SVG_LENGTHTYPE_EXS (ex)
5 – SVG_LENGTHTYPE_PX (px)
6 – SVG_LENGTHTYPE_CM (cm)
7 – SVG_LENGTHTYPE_MM (mm)
8 – SVG_LENGTHTYPE_IN (in)
9 – SVG_LENGTHTYPE_PT (pt)
10 – SVG_LENGTHTYPE_PC (pc)

Nützlich ist unitType immer dann, wenn man valueInSpecifiedUnits richtig deuten muss, zum Beispiel beim Auslesen von width, x oder r eines SVG-Elements über element.width.baseVal. Die Eigenschaft ist nur lesbar. Die Einheit ändert man mit newValueSpecifiedUnits() oder convertToSpecifiedUnits().

Rückgabewert

Typ

number

Beschreibung

Eine Ganzzahl (unsigned short) von 0 bis 10, die einer SVGLength.SVG_LENGTHTYPE_*-Konstante entspricht.

Beispiele

Einheit eines Attributs prüfen

const ns = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(ns, "svg");
const rect = document.createElementNS(ns, "rect");
rect.setAttribute("width", "10em");
svg.append(rect);
document.body.append(svg);

const len = rect.width.baseVal;
console.log(len.unitType);                                  // 3
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_EMS); // true
console.log(len.valueInSpecifiedUnits);                     // 10

3 true 10

Einheitentyp in lesbares Kürzel übersetzen

const UNIT_NAMES = {
  [SVGLength.SVG_LENGTHTYPE_UNKNOWN]: "?",
  [SVGLength.SVG_LENGTHTYPE_NUMBER]: "",
  [SVGLength.SVG_LENGTHTYPE_PERCENTAGE]: "%",
  [SVGLength.SVG_LENGTHTYPE_EMS]: "em",
  [SVGLength.SVG_LENGTHTYPE_EXS]: "ex",
  [SVGLength.SVG_LENGTHTYPE_PX]: "px",
  [SVGLength.SVG_LENGTHTYPE_CM]: "cm",
  [SVGLength.SVG_LENGTHTYPE_MM]: "mm",
  [SVGLength.SVG_LENGTHTYPE_IN]: "in",
  [SVGLength.SVG_LENGTHTYPE_PT]: "pt",
  [SVGLength.SVG_LENGTHTYPE_PC]: "pc",
};

const describe = (len) =>
  `${len.valueInSpecifiedUnits}${UNIT_NAMES[len.unitType]}`;

const ns = "http://www.w3.org/2000/svg";
const circle = document.createElementNS(ns, "circle");
circle.setAttribute("r", "50%");
console.log(describe(circle.r.baseVal));

50%

Einheit umrechnen und unitType erneut prüfen

const ns = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(ns, "svg");
document.body.append(svg);

const len = svg.createSVGLength();
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN, 2);
console.log(len.unitType, len.valueAsString); // 8 "2in"

len.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(len.unitType, len.valueInSpecifiedUnits); // 5 192

8 "2in" 5 192

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an unitType wird ignoriert bzw. wirft im Strict Mode einen TypeError. Nutze stattdessen newValueSpecifiedUnits() oder convertToSpecifiedUnits().
Neuere CSS-Einheiten: Für Einheiten wie rem, vw, vh oder ch gibt es keine eigene Konstante. Die Browser liefern dafür meist 0 (SVG_LENGTHTYPE_UNKNOWN). Verlasse dich in diesem Fall auf value (in Benutzereinheiten) oder valueAsString.
Reine Zahlen: width=\"100\" ergibt SVG_LENGTHTYPE_NUMBER (1), nicht PX (5), obwohl beides beim Rendern gleich wirkt.
Relative Einheiten: Werden %, em oder ex umgerechnet und ist das Element nicht im Dokument eingehängt, kann eine Exception (NotSupportedError) auftreten.
baseVal vs. animVal: animVal ist komplett nur lesbar. unitType kann dort während einer SMIL-Animation von baseVal abweichen.
Wird in allen modernen Browsern unterstützt.

Siehe auch

SVGLength SVGLength.value SVGAnimatedLength SVGLength.valueAsString SVGLength.valueInSpecifiedUnits