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 grundlegenden Datentyp <length>.
Ein SVGLength-Objekt kann als schreibgeschützt gekennzeichnet sein. Versuche, das Objekt zu ändern, lösen dann eine Ausnahme aus.
Statische Eigenschaften
SVG_LENGTHTYPE_UNKNOWN(0)-
Der Einheitentyp gehört nicht zu den vordefinierten Einheitentypen. Es ist unzulässig, einen neuen Wert dieses Typs zu definieren oder einen vorhandenen Wert auf diesen Typ umzustellen.
SVG_LENGTHTYPE_NUMBER(1)-
Es wurde kein Einheitentyp angegeben (d.h. es wurde ein Wert ohne Einheit angegeben). Der Wert wird daher in Benutzereinheiten ausgedrückt.
SVG_LENGTHTYPE_PERCENTAGE(2)-
Es wurde ein Prozentwert angegeben.
SVG_LENGTHTYPE_EMS(3)-
Es wurde ein Wert in
em-Einheiten angegeben. SVG_LENGTHTYPE_EXS(4)-
Es wurde ein Wert in
ex-Einheiten angegeben. SVG_LENGTHTYPE_PX(5)-
Es wurde ein Wert in
px-Einheiten angegeben. SVG_LENGTHTYPE_CM(6)-
Es wurde ein Wert in
cm-Einheiten angegeben. SVG_LENGTHTYPE_MM(7)-
Es wurde ein Wert in
mm-Einheiten angegeben. SVG_LENGTHTYPE_IN(8)-
Es wurde ein Wert in
in-Einheiten angegeben. SVG_LENGTHTYPE_PT(9)-
Es wurde ein Wert in
pt-Einheiten angegeben. SVG_LENGTHTYPE_PC(10)-
Es wurde ein Wert in
pc-Einheiten angegeben.
Instanzeigenschaften
unitTypeSchreibgeschützt-
Der Typ des Werts, angegeben durch eine der in dieser Schnittstelle definierten
SVG_LENGTHTYPE_*-Konstanten. value-
Der Wert als Gleitkommazahl in Benutzereinheiten.
valueAsString-
Der Wert als Zeichenfolge in den durch
unitTypeangegebenen Einheiten. valueInSpecifiedUnits-
Der Wert als Gleitkommazahl in den durch
unitTypeangegebenen Einheiten.
Instanzmethoden
convertToSpecifiedUnits()-
Behält den zugrunde liegenden gespeicherten Wert bei, setzt aber die gespeicherte Einheitenkennung auf den angegebenen
unitType. newValueSpecifiedUnits()-
Setzt den Wert auf eine Zahl mit zugehörigem
unitTypeund ersetzt damit die Werte aller Eigenschaften des Objekts.
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.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 (Pixeleinheiten hängen von der DPI-Einstellung ab):
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 |