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.
Also implement | None |
---|---|
Methods |
|
Properties |
|
Constants |
|
Normative document | SVG 1.1 (2nd Edition) |
<!--?xml version="1.0"?--> <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 fill="green" height="1cm" id="myRect" stroke="black" stroke-width="1" width="1cm" x="1cm" y="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
Name | Value | Description |
---|---|---|
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. |
Name | Type | Description |
---|---|---|
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 Exceptions on setting: a |
valueInSpecifiedUnits | float | The value as a floating point value, in the units expressed by Exceptions on setting: a |
valueAsString | DOMString | The value as a string value, in the units expressed by Exceptions on setting:
|
Name & Arguments | Return | Description |
---|---|---|
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:
|
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 and 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". |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | (Yes) | ? | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGLength