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
<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 GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support