SVGLength

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

SVG-Längen-Interface

Das SVGLength-Interface entspricht dem grundlegenden Datentyp <length>.

Ein SVGLength-Objekt kann als schreibgeschützt bezeichnet werden, was bedeutet, dass Versuche, das Objekt zu ändern, zu einer Ausnahme führen.

Überblick über das Interface

Implementiert auch Keine
Methoden
  • void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)
  • void convertToSpecifiedUnits(in unsigned short unitType)
Eigenschaften
  • readonly unsigned short unitType
  • float value
  • float valueInSpecifiedUnits
  • string valueAsString
Konstanten
  • SVG_LENGTHTYPE_UNKNOWN = 0
  • SVG_LENGTHTYPE_NUMBER = 1
  • SVG_LENGTHTYPE_PERCENTAGE = 2
  • SVG_LENGTHTYPE_EMS = 3
  • SVG_LENGTHTYPE_EXS = 4
  • SVG_LENGTHTYPE_PX = 5
  • SVG_LENGTHTYPE_CM = 6
  • SVG_LENGTHTYPE_MM = 7
  • SVG_LENGTHTYPE_IN = 8
  • SVG_LENGTHTYPE_PT = 9
  • SVG_LENGTHTYPE_PC = 10
Normatives Dokument SVG 1.1 (2. Ausgabe)

Beispiel

xml
<svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
  <script><![CDATA[
function start() {
  const rect = document.getElementById("myRect");
  const val  = rect.x.baseVal;

  // read x in pixel and cm units
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits: " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", valueAsString: " + val.valueAsString);

  // set x = 20pt and read it out in pixel and pt units
  val.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PT, 20);
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", valueAsString: " + val.valueAsString);

  // convert x = 20pt to inches and read out in pixel and inch units
  val.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN);
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", valueAsString: " + val.valueAsString);
}
]]></script>
  <rect id="myRect"
        x="1cm" y="1cm"
        fill="green" stroke="black" stroke-width="1"
        width="1cm" height="1cm"
  />
</svg>

Ergebnisse auf einem Desktop-Monitor (Pixel-Einheiten sind dpi-abhängig):

value: 37.7952766418457, valueInSpecifiedUnits: 6: 1, valueAsString: 1cm
value: 26.66666603088379, valueInSpecifiedUnits 9: 20, valueAsString: 20pt
value: 26.66666603088379, valueInSpecifiedUnits 8: 0.277777761220932, valueAsString: 0.277778in

Konstanten

Name Wert Beschreibung
SVG_LENGTHTYPE_UNKNOWN 0 Der Einheitstyp ist keiner der vordefinierten Einheitstypen. Es ist ungültig, zu versuchen, einen neuen Wert dieses Typs zu definieren oder einen bestehenden Wert auf diesen Typ umzustellen.
SVG_LENGTHTYPE_NUMBER 1 Es wurde kein Einheitstyp angegeben (d.h., ein einheitsloser Wert wurde festgelegt), was einen Wert in Benutzereinheiten angibt.
SVG_LENGTHTYPE_PERCENTAGE 2 Ein Prozentwert wurde angegeben.
SVG_LENGTHTYPE_EMS 3 Ein Wert wurde unter Verwendung der in CSS2 definierten Em-Einheiten angegeben.
SVG_LENGTHTYPE_EXS 4 Ein Wert wurde unter Verwendung der in CSS2 definierten Ex-Einheiten angegeben.
SVG_LENGTHTYPE_PX 5 Ein Wert wurde unter Verwendung der in CSS2 definierten Px-Einheiten angegeben.
SVG_LENGTHTYPE_CM 6 Ein Wert wurde unter Verwendung der in CSS2 definierten Cm-Einheiten angegeben.
SVG_LENGTHTYPE_MM 7 Ein Wert wurde unter Verwendung der in CSS2 definierten Mm-Einheiten angegeben.
SVG_LENGTHTYPE_IN 8 Ein Wert wurde unter Verwendung der in CSS2 definierten In-Einheiten angegeben.
SVG_LENGTHTYPE_PT 9 Ein Wert wurde unter Verwendung der in CSS2 definierten Pt-Einheiten angegeben.
SVG_LENGTHTYPE_PC 10 Ein Wert wurde unter Verwendung der in CSS2 definierten Pc-Einheiten angegeben.

Instanzeigenschaften

Name Typ Beschreibung
unitType unsigned short Der Typ des Wertes, wie durch eine der auf diesem Interface definierten SVG_LENGTHTYPE_* Konstanten angegeben.
value float

Der Wert als Gleitkommawert in Benutzereinheiten. Wenn dieses Attribut gesetzt wird, werden valueInSpecifiedUnits und valueAsString automatisch aktualisiert, um diese Einstellung widerzuspiegeln.

Ausnahmen beim Setzen: Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn die Länge einem schreibgeschützten Attribut entspricht oder das Objekt selbst schreibgeschützt ist.

valueInSpecifiedUnits float

Der Wert als Gleitkommawert in den durch unitType ausgedrückten Einheiten. Wenn dieses Attribut gesetzt wird, werden value und valueAsString automatisch aktualisiert, um diese Einstellung widerzuspiegeln.

Ausnahmen beim Setzen: Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn die Länge einem schreibgeschützten Attribut entspricht oder das Objekt selbst schreibgeschützt ist.

valueAsString string

Der Wert als Zeichenfolgenwert in den durch unitType ausgedrückten Einheiten. Wenn dieses Attribut gesetzt wird, werden value, valueInSpecifiedUnits, und unitType automatisch aktualisiert, um diese Einstellung widerzuspiegeln.

Ausnahmen beim Setzen:

  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code SYNTAX_ERR wird ausgelöst, wenn die zugewiesene Zeichenfolge nicht als gültiges <length> geparst werden kann.
  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn die Länge einem schreibgeschützten Attribut entspricht oder das Objekt selbst schreibgeschützt ist.

Instanzmethoden

Name & Argumente Rückgabe Beschreibung
newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) void

Setzt den Wert als Zahl mit einem zugehörigen unitType zurück und ersetzt dabei die Werte für alle Attribute des Objekts.

Ausnahmen:

  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NOT_SUPPORTED_ERR wird ausgelöst, wenn unitType SVG_LENGTHTYPE_UNKNOWN ist oder kein gültiger Einheitstypkonstant (einer der anderen auf diesem Interface definierten SVG_LENGTHTYPE_* Konstanten).
  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn die Länge einem schreibgeschützten Attribut entspricht oder das Objekt selbst schreibgeschützt ist.
convertToSpecifiedUnits(in unsigned short unitType) void Bewahrt denselben zugrunde liegenden gespeicherten Wert, setzt jedoch den gespeicherten Bezeichner der Einheit auf den angegebenen unitType zurück. Objektattribute unitType, valueInSpecifiedUnits und valueAsString können als Ergebnis dieser Methode geändert werden. Beispielsweise, wenn der ursprüngliche Wert "0.5cm" war und die Methode aufgerufen wurde, um zu Millimetern zu konvertieren, dann würde der unitType auf SVG_LENGTHTYPE_MM geändert, valueInSpecifiedUnits auf den numerischen Wert 5 geändert und valueAsString auf "5mm" geändert.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGLength

Browser-Kompatibilität

BCD tables only load in the browser