SVGLength

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
					

常量

Name 描述
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 描述
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 返回 描述
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 is raised if 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" .

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
  1. SVGLength
  2. Related pages for SVG
    1. SVGAElement
    2. SVGAltGlyphElement
    3. SVGAngle
    4. SVGAnimateColorElement
    5. SVGAnimateElement
    6. SVGAnimateMotionElement
    7. SVGAnimateTransformElement
    8. SVGAnimatedAngle
    9. SVGAnimatedBoolean
    10. SVGAnimatedEnumeration
    11. SVGAnimatedInteger
    12. SVGAnimatedLength
    13. SVGAnimatedLengthList
    14. SVGAnimatedNumber
    15. SVGAnimatedNumberList
    16. SVGAnimatedPathData
    17. SVGAnimatedPoints
    18. SVGAnimatedPreserveAspectRatio
    19. SVGAnimatedRect
    20. SVGAnimatedString
    21. SVGAnimatedTransformList
    22. SVGAnimationElement
    23. SVGCircleElement
    24. SVGClipPathElement
    25. SVGComponentTransferFunctionElement
    26. SVGCursorElement
    27. SVGDefsElement
    28. SVGDescElement
    29. SVGDocument
    30. SVGElement
    31. SVGEllipseElement
    32. SVGFEBlendElement
    33. SVGFEColorMatrixElement
    34. SVGFEComponentTransferElement
    35. SVGFECompositeElement
    36. SVGFEConvolveMatrixElement
    37. SVGFEDiffuseLightingElement
    38. SVGFEDisplacementMapElement
    39. SVGFEDistantLightElement
    40. SVGFEDropShadowElement
    41. SVGFEFloodElement
    42. SVGFEFuncAElement
    43. SVGFEFuncBElement
    44. SVGFEFuncGElement
    45. SVGFEFuncRElement
    46. SVGFEGaussianBlurElement
    47. SVGFEImageElement
    48. SVGFEMergeElement
    49. SVGFEMergeNodeElement
    50. SVGFEMorphologyElement
    51. SVGFEOffsetElement
    52. SVGFEPointLightElement
    53. SVGFESpecularLightingElement
    54. SVGFESpotLightElement
    55. SVGFETileElement
    56. SVGFETurbulenceElement
    57. SVGFilterElement
    58. SVGFilterPrimitiveStandardAttributes
    59. SVGFitToViewBox
    60. SVGFontElement
    61. SVGFontFaceElement
    62. SVGFontFaceFormatElement
    63. SVGFontFaceNameElement
    64. SVGFontFaceSrcElement
    65. SVGFontFaceUriElement
    66. SVGForeignObjectElement
    67. SVGGElement
    68. SVGGlyphElement
    69. SVGGradientElement
    70. SVGGraphicsElement
    71. SVGHKernElement
    72. SVGImageElement
    73. SVGLengthList
    74. SVGLineElement
    75. SVGLinearGradientElement
    76. SVGMPathElement
    77. SVGMarkerElement
    78. SVGMaskElement
    79. SVGMatrix
    80. SVGMetadataElement
    81. SVGMissingGlyphElement
    82. SVGNumber
    83. SVGNumberList
    84. SVGPathElement
    85. SVGPathSeg
    86. SVGPathSegArcAbs
    87. SVGPathSegArcRel
    88. SVGPathSegClosePath
    89. SVGPathSegCurvetoCubicAbs
    90. SVGPathSegCurvetoCubicRel
    91. SVGPathSegCurvetoCubicSmoothAbs
    92. SVGPathSegCurvetoCubicSmoothRel
    93. SVGPathSegCurvetoQuadraticAbs
    94. SVGPathSegCurvetoQuadraticRel
    95. SVGPathSegCurvetoQuadraticSmoothAbs
    96. SVGPathSegCurvetoQuadraticSmoothRel
    97. SVGPathSegLinetoAbs
    98. SVGPathSegLinetoHorizontalAbs
    99. SVGPathSegLinetoHorizontalRel
    100. SVGPathSegLinetoRel
    101. SVGPathSegLinetoVerticalAbs
    102. SVGPathSegLinetoVerticalRel
    103. SVGPathSegList
    104. SVGPathSegMovetoAbs
    105. SVGPathSegMovetoRel
    106. SVGPatternElement
    107. SVGPoint
    108. SVGPointList
    109. SVGPolygonElement
    110. SVGPolylineElement
    111. SVGPreserveAspectRatio
    112. SVGRadialGradientElement
    113. SVGRect
    114. SVGRectElement
    115. SVGSVGElement
    116. SVGScriptElement
    117. SVGSetElement
    118. SVGStopElement
    119. SVGStringList
    120. SVGStylable
    121. SVGStyleElement
    122. SVGSwitchElement
    123. SVGSymbolElement
    124. SVGTRefElement
    125. SVGTSpanElement
    126. SVGTests
    127. SVGTextContentElement
    128. SVGTextElement
    129. SVGTextPathElement
    130. SVGTextPositioningElement
    131. SVGTitleElement
    132. SVGTransform
    133. SVGTransformList
    134. SVGTransformable
    135. SVGURIReference
    136. SVGUnitTypes
    137. SVGUseElement
    138. SVGVKernElement
    139. SVGViewElement
    140. SVGZoomAndPan
    141. SVGZoomEvent
    142. TimeEvent