SVGLength
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The SVGLength interface correspond to the <length> basic data type.
An SVGLength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
Instance properties
unitType-
The type of the value as specified by one of the
SVG_LENGTHTYPE_*constants defined on this interface. value-
The value as a floating point value, in user units.
valueAsString-
The value as a string value, in the units expressed by
unitType. valueInSpecifiedUnits-
The value as a floating point value, in the units expressed by
unitType.
Instance methods
convertToSpecifiedUnits()-
Preserve the same underlying stored value, but reset the stored unit identifier to the given
unitType. newValueSpecifiedUnits()-
Reset the value as a number with an associated
unitType, thereby replacing the values for all of the attributes on the object.
Static properties
SVG_LENGTHTYPE_UNKNOWN(0)-
The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_LENGTHTYPE_NUMBER(1)-
No unit type was provided (i.e., a unitless value was specified), which indicates a value in user units.
SVG_LENGTHTYPE_PERCENTAGE(2)-
A percentage value was specified.
SVG_LENGTHTYPE_EMS(3)-
A value was specified using the
emunits. SVG_LENGTHTYPE_EXS(4)-
A value was specified using the
exunits. SVG_LENGTHTYPE_PX(5)-
A value was specified using the
pxunits. SVG_LENGTHTYPE_CM(6)-
A value was specified using the
cmunits. SVG_LENGTHTYPE_MM(7)-
A value was specified using the
mmunits. SVG_LENGTHTYPE_IN(8)-
A value was specified using the
inunits. SVG_LENGTHTYPE_PT(9)-
A value was specified using the
ptunits. SVG_LENGTHTYPE_PC(10)-
A value was specified using the
pcunits.
Example
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>
Results on a desktop monitor (pixel units will be dpi-dependent):
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
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGLength |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
SVGLength
|
|
|
|
|
|
|
|
|
|
|
|
|
convertToSpecifiedUnits
|
|
|
|
|
|
|
|
|
|
|
|
|
newValueSpecifiedUnits
|
|
|
|
|
|
|
|
|
|
|
|
|
unitType
|
|
|
|
|
|
|
|
|
|
|
|
|
value
|
|
|
|
|
|
|
|
|
|
|
|
|
valueAsString
|
|
|
|
|
|
|
|
|
|
|
|
|
valueInSpecifiedUnits
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support