SVGLength

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

SVG length インターフェイス

SVGLength インターフェイスは、<length> 基本データ型に対応します。

SVGLength オブジェクトは読み取り専用として指定されていることがあり、その場合はオブジェクトを変更しようとすると例外が発生します。

インターフェイス概要

実装しているもの なし
メソッド
  • void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)
  • void convertToSpecifiedUnits(in unsigned short unitType)
プロパティ
  • readonly 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 (2nd Edition)

例

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>

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 単位の型が定義済みの単位の型ではありません。この型の新しい値を定義しようとしたり、既存の値をこの型に切り替えようとしたりすることはできません。
SVG_LENGTHTYPE_NUMBER 1 単位の型が指定されておらず（すなわち、単位のない値が指定されています）。ユーザー単位での値を示しています。
SVG_LENGTHTYPE_PERCENTAGE 2 パーセント値が指定されていました。
SVG_LENGTHTYPE_EMS 3 値が em 単位（CSS2 で定義）を使用して指定されていました。
SVG_LENGTHTYPE_EXS 4 値が ex 単位（CSS2 で定義）を使用して指定されていました。
SVG_LENGTHTYPE_PX 5 値が px 単位（CSS2 で定義）を使用して指定されていました。
SVG_LENGTHTYPE_CM 6 値が cm 単位（CSS2 で定義）を使用して指定されていました。
SVG_LENGTHTYPE_MM 7 値が mm 単位（CSS2 で定義）を使用して指定されていました。
SVG_LENGTHTYPE_IN 8 値が in 単位（CSS2 で定義）を使用して指定されていました。
SVG_LENGTHTYPE_PT 9 値が pt 単位（CSS2 で定義）を使用して指定されていました。
SVG_LENGTHTYPE_PC 10 値が pc 単位（CSS2 で定義）を使用して指定されていました。

インスタンスプロパティ

名前 型 解説
unitType unsigned short 値の型で、このインターフェイスで定義されている SVG_LENGTHTYPE_* 定数のいずれかで指定されます。
value float

ユーザー単位における浮動小数点数値としての値。この属性を設定すると、この設定を反映して、valueInSpecifiedUnits と valueAsString が自動的に更新されます。

設定時の例外: 長さが読み取り専用属性に対応している場合、またはオブジェクト自体が読み取り専用である場合に、DOMException 例外が NO_MODIFICATION_ALLOWED_ERR のコードで発生します。

valueInSpecifiedUnits float

unitType で指定された単位における浮動小数点数としての値。この属性を設定すると、value および valueAsString が自動的に更新され、この設定が反映されます。

設定時の例外: 長さが読み取り専用属性に対応している場合、またはオブジェクト自体が読み取り専用である場合に、DOMException 例外が NO_MODIFICATION_ALLOWED_ERR のコードで発生します。

valueAsString string

unitType で指定された単位での文字列値。この属性を設定すると、value、valueInSpecifiedUnits、unitType が自動的に更新され、この設定が反映されます。

設定時の例外:

  • 代入された文字列が有効な <length> として解釈できない場合、DOMException 例外が SYNTAX_ERR のコードで発生します。
  • 長さが読み取り専用属性に対応している場合、またはオブジェクト自体が読み取り専用である場合に、DOMException 例外が NO_MODIFICATION_ALLOWED_ERR のコードで発生します。

インスタンスメソッド

名前と引数 返値 説明
newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) void

関連する unitType を伴う数値として値をリセットし、それによってこのオブジェクト上のすべての属性の値を置き換えます。

例外:

  • unitType が SVG_LENGTHTYPE_UNKNOWN である場合、または有効な単位型定数（このインターフェイスで定義されている他の SVG_LENGTHTYPE_* 定数のいずれか）でない場合、DOMException が NOT_SUPPORTED_ERR のコードで発生します。
  • 長さが読み取り専用属性に一致する場合、またはオブジェクト自体が読み取り専用である場合に、DOMException が NO_MODIFICATION_ALLOWED_ERR のコードで発生します。
convertToSpecifiedUnits(in unsigned short unitType) void ベースとして保存された値は同じままですが、格納された単位識別子は指定された unitType にリセットされます。このメソッドの結果として、オブジェクトの unitType、valueInSpecifiedUnits、valueAsString の各属性が変更される場合があります。例えば、元の値が "0.5cm" で、ミリメートルへの変換を呼び出した場合、 unitType は SVG_LENGTHTYPE_MM に、valueInSpecifiedUnits は数値 5 に、valueAsString は "5mm" に変更されます。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGLength

ブラウザーの互換性