1. 開発者向けのウェブ技術
  2. Web API
  3. SVGLength

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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

仕様書

仕様書
Scalable Vector Graphics (SVG) 2
# InterfaceSVGLength

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

AltStyle によって変換されたページ (->オリジナル) /