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.

Die SVGLength-Schnittstelle 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.

Instanz-Eigenschaften

unitType

Der Typ des Wertes, wie durch eine der SVG_LENGTHTYPE_*-Konstanten auf dieser Schnittstelle angegeben.

value

Der Wert als Fließkommawert, in Benutzereinheiten.

valueAsString

Der Wert als Zeichenfolgenwert, in den durch unitType angegebenen Einheiten.

valueInSpecifiedUnits

Der Wert als Fließkommawert, in den durch unitType angegebenen Einheiten.

Name Wert Beschreibung
SVG_LENGTHTYPE_UNKNOWN 0 Der Einheitstyp ist nicht einer der vordefinierten Einheitstypen. Es ist ungültig, zu versuchen, einen neuen Wert dieses Typs zu definieren oder einen bestehenden Wert auf diesen Typ zu wechseln.
SVG_LENGTHTYPE_NUMBER 1 Es wurde kein Einheitstyp angegeben (d.h., ein wertloser Wert wurde angegeben), 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.

Instanzmethoden

convertToSpecifiedUnits()

Beibehaltung des gleichen unterliegenden gespeicherten Werts, jedoch Zurücksetzen des gespeicherten Einheitenidentifikators auf den angegebenen unitType.

newValueSpecifiedUnits()

Zurücksetzen des Wertes als Zahl mit einem zugehörigen 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 (Pixeleinheiten 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
SVGLength
convertToSpecifiedUnits
newValueSpecifiedUnits
unitType
value
valueAsString
valueInSpecifiedUnits

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support