From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/svggraphicselement/getbbox/index.html | 89 ++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/ja/web/api/svggraphicselement/getbbox/index.html (limited to 'files/ja/web/api/svggraphicselement/getbbox') diff --git a/files/ja/web/api/svggraphicselement/getbbox/index.html b/files/ja/web/api/svggraphicselement/getbbox/index.html new file mode 100644 index 0000000000..68e2885a79 --- /dev/null +++ b/files/ja/web/api/svggraphicselement/getbbox/index.html @@ -0,0 +1,89 @@ +--- +title: getBBox() +slug: Web/API/SVGGraphicsElement/getBBox +tags: + - API + - Method + - Reference + - SVG + - SVG DOM + - SVGGraphicsElement + - メソッド +translation_of: Web/API/SVGGraphicsElement/getBBox +--- +
{{APIRef}}
+ +

SVGGraphicsElement.getBBox() で、オブジェクトが収まる最小の矩形の座標を特定することができます。返される座標は、現在の SVG 空間、すなわち対象の要素に含まれる位置に関する属性すべてを適用した後の空間に従います。

+ +

メモ: getBBox は要素がまだレンダリングされていない場合でも、メソッドが呼び出されたときに実際の境界ボックスを返します。また、要素またはその親に適用される変換は無視します。

+ +
+

getBBox は {{domxref("Element.getBoundingClientRect()", "getBoundingClientRect()")}} とは異なる値を返します。後者はビューポートからの相対値を返します。

+
+ +

構文

+ +
let bboxRect = object.getBBox();
+ +

返値

+ +

返値は {{domxref("SVGRect")}} オブジェクトで、境界ボックスを定義します。この値はその要素や親要素に適用された変形属性を無視したものです。

+ +

例

+ +

HTML

+ +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <g id="group_text_1">
+        <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
+        <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text>
+    </g>
+    <!-- Shows BBox in green -->
+    <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect>
+    <!-- Shows BoundingClientRect in red -->
+    <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
+</svg>
+
+ +

JavaScript

+ +
var rectBBox = document.querySelector('#rect_1');
+var rectBoundingClientRect = document.querySelector('#rect_2');
+var groupElement = document.querySelector('#group_text_1');
+
+var bboxGroup = groupElement.getBBox();
+rectBBox.setAttribute('x', bboxGroup.x);
+rectBBox.setAttribute('y', bboxGroup.y);
+rectBBox.setAttribute('width', bboxGroup.width);
+rectBBox.setAttribute('height', bboxGroup.height);
+
+var boundingClientRectGroup = groupElement.getBoundingClientRect();
+rectBoundingClientRect.setAttribute('x', boundingClientRectGroup.x);
+rectBoundingClientRect.setAttribute('y', boundingClientRectGroup.y);
+rectBoundingClientRect.setAttribute('width', boundingClientRectGroup.width);
+rectBoundingClientRect.setAttribute('height', boundingClientRectGroup.height);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('SVG1.1', 'types.html#__svg__SVGLocatable__getBBox', 'getBBox')}}{{Spec2('SVG1.1')}}初回定義 (SVG 要素のみに適用).
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf