SVGLength - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

SVGLength

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die SVGLength Schnittstelle entspricht dem <length> Basisdatentyp.

Ein SVGLength-Objekt kann als schreibgeschützt bezeichnet werden, was bedeutet, dass Versuche, das Objekt zu ändern, eine Ausnahme auslösen.

In diesem Artikel

Instanz-Eigenschaften

unitType

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

value

Der Wert als Fließkommawert in Benutzereinheiten.

valueAsString

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

valueInSpecifiedUnits

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

Instanz-Methoden

convertToSpecifiedUnits()

Behalten Sie den gleichen zugrunde liegenden gespeicherten Wert bei, setzen Sie aber den gespeicherten Einheitentyp auf den angegebenen unitType zurück.

newValueSpecifiedUnits()

Setzen Sie den Wert als Zahl mit einem zugeordneten unitType zurück, wodurch die Werte aller Attribute des Objekts ersetzt werden.

Statische Eigenschaften

SVG_LENGTHTYPE_UNKNOWN (0)

Der Einheitentyp ist keiner der vordefinierten Einheitentypen. Es ist ungültig, zu versuchen, einen neuen Wert dieses Typs zu definieren oder einen bestehenden Wert auf diesen Typ umzuschalten.

SVG_LENGTHTYPE_NUMBER (1)

Es wurde kein Einheitentyp angegeben (d.h. ein wert ohne Einheit wurde angegeben), was einen Wert in Benutzereinheiten angibt.

SVG_LENGTHTYPE_PERCENTAGE (2)

Ein Prozentwert wurde angegeben.

SVG_LENGTHTYPE_EMS (3)

Ein Wert wurde mit em Einheiten angegeben.

SVG_LENGTHTYPE_EXS (4)

Ein Wert wurde mit ex Einheiten angegeben.

SVG_LENGTHTYPE_PX (5)

Ein Wert wurde mit px Einheiten angegeben.

SVG_LENGTHTYPE_CM (6)

Ein Wert wurde mit cm Einheiten angegeben.

SVG_LENGTHTYPE_MM (7)

Ein Wert wurde mit mm Einheiten angegeben.

SVG_LENGTHTYPE_IN (8)

Ein Wert wurde mit in Einheiten angegeben.

SVG_LENGTHTYPE_PT (9)

Ein Wert wurde mit pt Einheiten angegeben.

SVG_LENGTHTYPE_PC (10)

Ein Wert wurde mit pc Einheiten angegeben.

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.valueInSpecifiedUnits} (${val.unitType}), 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.valueInSpecifiedUnits} (${val.unitType}), 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.valueInSpecifiedUnits} (${val.unitType}), 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

Spezifikationen

Spezifikation

Scalable Vector Graphics (SVG) 2
# InterfaceSVGLength

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden