SVGLength

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 em units.

SVG_LENGTHTYPE_EXS (4)

A value was specified using the ex units.

SVG_LENGTHTYPE_PX (5)

A value was specified using the px units.

SVG_LENGTHTYPE_CM (6)

A value was specified using the cm units.

SVG_LENGTHTYPE_MM (7)

A value was specified using the mm units.

SVG_LENGTHTYPE_IN (8)

A value was specified using the in units.

SVG_LENGTHTYPE_PT (9)

A value was specified using the pt units.

SVG_LENGTHTYPE_PC (10)

A value was specified using the pc units.

Example

<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

Browser compatibility