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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Die SVGLength-Schnittstelle entspricht dem grundlegenden Datentyp <length>.

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

Instanz-Eigenschaften

unitType

Der Typ des Wertes, der durch eine der SVG_LENGTHTYPE_* Konstanten, die in dieser Schnittstelle definiert sind, festgelegt ist.

value

Der Wert als Fließkommawert in Benutzereinheiten.

valueAsString

Der Wert als Zeichenfolgenwert in den durch unitType ausgedrückten Einheiten.

valueInSpecifiedUnits

Der Wert als Fließkommawert in den durch unitType ausgedrückten Einheiten.

Name Wert Beschreibung
SVG_LENGTHTYPE_UNKNOWN 0 Der Einheiten-Typ ist keiner der vordefinierten Einheiten-Typen. Es ist unzulässig, zu versuchen, einen neuen Wert dieses Typs zu definieren oder einen vorhandenen Wert in diesen Typ zu ändern.
SVG_LENGTHTYPE_NUMBER 1 Es wurde kein Einheiten-Typ angegeben (d.h. es wurde ein wert ohne Einheiten angegeben), was auf einen Wert in Benutzereinheiten hinweist.
SVG_LENGTHTYPE_PERCENTAGE 2 Ein Prozentsatz-Wert 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.

Instanz-Methoden

convertToSpecifiedUnits()

Beibehaltung des gleichen zugrunde liegenden gespeicherten Wertes, aber Zurücksetzen des gespeicherten Einheitenbezeichners auf den angegebenen unitType.

newValueSpecifiedUnits()

Zurücksetzen des Wertes als Zahl mit einem zugeordneten unitType, wodurch die Werte aller Attribute des Objekts ersetzt werden.

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 (Piksel-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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGLength

Browser-Kompatibilität