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.

TheSVGLength interface correspond to the<length> basic data type.

AnSVGLength 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 theSVG_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 byunitType.
valueInSpecifiedUnits: The value as a floating point value, in the units expressed byunitType.

Instance methods

convertToSpecifiedUnits(): Preserve the same underlying stored value, but reset the stored unit identifier to the givenunitType.
newValueSpecifiedUnits(): Reset the value as a number with an associatedunitType, 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 theem units.
SVG_LENGTHTYPE_EXS (4): A value was specified using theex units.
SVG_LENGTHTYPE_PX (5): A value was specified using thepx units.
SVG_LENGTHTYPE_CM (6): A value was specified using thecm units.
SVG_LENGTHTYPE_MM (7): A value was specified using themm units.
SVG_LENGTHTYPE_IN (8): A value was specified using thein units.
SVG_LENGTHTYPE_PT (9): A value was specified using thept units.
SVG_LENGTHTYPE_PC (10): A value was specified using thepc units.

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        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: 1cmvalue: 26.66666603088379, valueInSpecifiedUnits 9: 20, valueAsString: 20ptvalue: 26.66666603088379, valueInSpecifiedUnits 8: 0.277777761220932, valueAsString: 0.277778in