SVGLength | Web API

在此页

SVG length interface
范例
常量
特性
方法
浏览器兼容性
相关话题

SVG length interface

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.

Interface overview

Also implement	`None`
方法	`void newValueSpecifiedUnits (in unsigned short unitType , in float valueInSpecifiedUnits )` `void convertToSpecifiedUnits (in unsigned short unitType )`
特性	readonly unsigned short `unitType` float `value` float `valueInSpecifiedUnits` `DOMString` `valueAsString`
常量	`SVG_LENGTHTYPE_UNKNOWN` = `0` `SVG_LENGTHTYPE_NUMBER` = `1` `SVG_LENGTHTYPE_PERCENTAGE` = `2` `SVG_LENGTHTYPE_EMS` = `3` `SVG_LENGTHTYPE_EXS` = `4` `SVG_LENGTHTYPE_PX` = `5` `SVG_LENGTHTYPE_CM` = `6` `SVG_LENGTHTYPE_MM` = `7` `SVG_LENGTHTYPE_IN` = `8` `SVG_LENGTHTYPE_PT` = `9` `SVG_LENGTHTYPE_PC` = `10`
Normative document	SVG 1.1 (2nd Edition)

范例

<svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript"><![CDATA[
function start() {
  var rect = document.getElementById("myRect");
  var val  = rect.x.baseVal;
  // read x in pixel and cm units
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits: " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", 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.unitType + ": " + val.valueInSpecifiedUnits +
            ", 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.unitType + ": " + val.valueInSpecifiedUnits +
            ", 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

常量

名称	值	描述
`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 defined in CSS2.
`SVG_LENGTHTYPE_EXS`	`4`	A value was specified using the ex units defined in CSS2.
`SVG_LENGTHTYPE_PX`	`5`	A value was specified using the px units defined in CSS2.
`SVG_LENGTHTYPE_CM`	`6`	A value was specified using the cm units defined in CSS2.
`SVG_LENGTHTYPE_MM`	`7`	A value was specified using the mm units defined in CSS2.
`SVG_LENGTHTYPE_IN`	`8`	A value was specified using the in units defined in CSS2.
`SVG_LENGTHTYPE_PT`	`9`	A value was specified using the pt units defined in CSS2.
`SVG_LENGTHTYPE_PC`	`10`	A value was specified using the pc units defined in CSS2.

特性

名称	类型	描述
`unitType`	unsigned short	The type of the value as specified by one of the `SVG_LENGTHTYPE_*` constants defined on this interface.
`value`	float	The value as a floating point value, in user units. Setting this attribute will cause `valueInSpecifiedUnits` and `valueAsString` to be updated automatically to reflect this setting. Exceptions on setting: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read only attribute or when the object itself is read only.
`valueInSpecifiedUnits`	float	The value as a floating point value, in the units expressed by `unitType` . Setting this attribute will cause `value` and `valueAsString` to be updated automatically to reflect this setting. Exceptions on setting: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read only attribute or when the object itself is read only.
`valueAsString`	`DOMString`	The value as a string value, in the units expressed by `unitType` . Setting this attribute will cause `value` , `valueInSpecifiedUnits` ，和 `unitType` to be updated automatically to reflect this setting. Exceptions on setting: a `DOMException` with code `SYNTAX_ERR` is raised if the assigned string cannot be parsed as a valid <length> . a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read only attribute or when the object itself is read only.

方法

Name & Arguments 返回描述

Name & Arguments	返回	描述
`newValueSpecifiedUnits (in unsigned short unitType , in float valueInSpecifiedUnits )`	`void`	Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object. Exceptions: a `DOMException` with code `NOT_SUPPORTED_ERR` 被引发若 `unitType` is `SVG_LENGTHTYPE_UNKNOWN` or not a valid unit type constant (one of the other `SVG_LENGTHTYPE_*` constants defined on this interface). a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the length corresponds to a read only attribute or when the object itself is read only.
`convertToSpecifiedUnits (in unsigned short unitType )`	`void`	Preserve the same underlying stored value, but reset the stored unit identifier to the given `unitType` . Object attributes `unitType` , `valueInSpecifiedUnits` ，和 `valueAsString` might be modified as a result of this method. For example, if the original value were `"0.5cm"` and the method was invoked to convert to millimeters, then the `unitType` would be changed to `SVG_LENGTHTYPE_MM` , `valueInSpecifiedUnits` would be changed to the numeric value `5` and `valueAsString` would be changed to `"5mm"` .


										
											newValueSpecifiedUnits
										
										(in unsigned short
										
											unitType
										
										, in float
										
											valueInSpecifiedUnits
										
										)

void

Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object.

Exceptions:

a DOMException with code NOT_SUPPORTED_ERR 被引发若 unitType is SVG_LENGTHTYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_LENGTHTYPE_* constants defined on this interface).
a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the length corresponds to a read only attribute or when the object itself is read only.

convertToSpecifiedUnits (in unsigned short unitType ) void Preserve the same underlying stored value, but reset the stored unit identifier to the given unitType . Object attributes unitType , valueInSpecifiedUnits ，和 valueAsString might be modified as a result of this method. For example, if the original value were "0.5cm" and the method was invoked to convert to millimeters, then the unitType would be changed to SVG_LENGTHTYPE_MM , valueInSpecifiedUnits would be changed to the numeric value 5 and valueAsString would be changed to "5mm" .

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`SVGLength`	Chrome Yes	Edge ≤18	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android No	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持
不支持
兼容性未知 ?

在此页

SVG length interface

Interface overview

范例

常量

特性

方法

浏览器兼容性

图例

相关话题