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