SVGLength

SVG 长度接口

SVGLength 接口对应于 <length> 基本数据类型。

SVGLength 对象可以指定为只读，这意味着尝试修改对象将导致抛出异常。

接口概述

也实现 无
方法
  • void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)
  • void convertToSpecifiedUnits(in unsigned short unitType)
属性
  • 只读 unsigned short unitType
  • float value
  • float valueInSpecifiedUnits
  • string 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
规范性文档 SVG 1.1（第二版）

示例

xml
<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.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>

台式机显示器上的结果（像素单位将取决于 dpi）

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 单元类型不是预定义单元类型之一。尝试定义此类型的新值或尝试将现有值切换到此类型是无效的。
SVG_LENGTHTYPE_NUMBER 1 未提供单元类型（即，指定了无单位值），这表示用户单位中的值。
SVG_LENGTHTYPE_PERCENTAGE 2 指定了百分比值。
SVG_LENGTHTYPE_EMS 3 使用 CSS2 中定义的 em 单位指定了一个值。
SVG_LENGTHTYPE_EXS 4 使用 CSS2 中定义的 ex 单位指定了一个值。
SVG_LENGTHTYPE_PX 5 使用 CSS2 中定义的 px 单位指定了一个值。
SVG_LENGTHTYPE_CM 6 使用 CSS2 中定义的 cm 单位指定了一个值。
SVG_LENGTHTYPE_MM 7 使用 CSS2 中定义的 mm 单位指定了一个值。
SVG_LENGTHTYPE_IN 8 使用 CSS2 中定义的 in 单位指定了一个值。
SVG_LENGTHTYPE_PT 9 使用 CSS2 中定义的 pt 单位指定了一个值。
SVG_LENGTHTYPE_PC 10 使用 CSS2 中定义的 pc 单位指定了一个值。

实例属性

名称 类型 描述
unitType unsigned short 由在此接口上定义的 SVG_LENGTHTYPE_* 常量之一指定的值类型。
value float

作为浮点值的用户单位中的值。设置此属性将导致 valueInSpecifiedUnits 和 valueAsString 自动更新以反映此设置。

设置时的异常：当长度对应于只读属性或对象本身为只读时，会引发代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。
valueInSpecifiedUnits float

作为浮点值的 unitType 表示的单位中的值。设置此属性将导致 value 和 valueAsString 自动更新以反映此设置。

设置时的异常：当长度对应于只读属性或对象本身为只读时，会引发代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。
valueAsString string

作为字符串值，以 unitType 表示的单位中的值。设置此属性将导致 value、valueInSpecifiedUnits 和 unitType 自动更新以反映此设置。

设置时的异常

  • 如果分配的字符串无法解析为有效的 <length>，则会引发代码为 SYNTAX_ERR 的 DOMException。
  • 当长度对应于只读属性或对象本身为只读时，会引发代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。

实例方法

名称和参数 返回值 描述
newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) void

将值重置为带有关联 unitType 的数字，从而替换对象上所有属性的值。

异常

  • 如果 unitType 为 SVG_LENGTHTYPE_UNKNOWN 或不是有效的单元类型常量（在此接口上定义的其他 SVG_LENGTHTYPE_* 常量之一），则会引发代码为 NOT_SUPPORTED_ERR 的 DOMException。
  • 当长度对应于只读属性或对象本身为只读时，会引发代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。
convertToSpecifiedUnits(in unsigned short unitType) void 保留相同的底层存储值，但将存储的单元标识符重置为给定的 unitType。对象属性 unitType、valueInSpecifiedUnits 和 valueAsString 可能会因此方法而修改。例如，如果原始值为 "0.5cm" 并且调用该方法转换为毫米，则 unitType 将更改为 SVG_LENGTHTYPE_MM，valueInSpecifiedUnits 将更改为数值 5，valueAsString 将更改为 "5mm"。

浏览器兼容性

BCD 表格仅在浏览器中加载