RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/SVGLength below:

SVGLength - Web APIs | MDN

SVGLength

Baseline Widely available

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4