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.

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

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

インスタンスプロパティ

unitType

このインターフェイスで定義されている SVG_ANGLETYPE_* 定数のいずれかを指定します。

value

ユーザー単位における浮動小数点値としての値です。

valueAsString

文字列値としての値を、unitType で表現された単位で表します。

valueInSpecifiedUnits

unitType で指定された単位で表される浮動小数点数としての値です。

名前 説明
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 で定義)を使用して指定されていました。

インスタンスメソッド

convertToSpecifiedUnits()

根底に保存されたのと同じ値を維持しますが、格納された単位識別子を指定された unitType にリセットします。

newValueSpecifiedUnits()

値を関連付けられた unitType を持つ数値としてリセットし、それによってオブジェクト上の属性の値をすべて置き換えます。

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGLength

ブラウザーの互換性