SVGLength - Web API | MDN

SVGLength

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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