diff options
Diffstat (limited to 'files/ja/web/api/svggraphicselement')
| -rw-r--r-- | files/ja/web/api/svggraphicselement/getbbox/index.html | 89 | ||||
| -rw-r--r-- | files/ja/web/api/svggraphicselement/index.html | 67 |
2 files changed, 156 insertions, 0 deletions
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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>SVGGraphicsElement.getBBox()</strong></code> で、オブジェクトが収まる最小の矩形の座標を特定することができます。返される座標は、現在の SVG 空間、すなわち対象の要素に含まれる位置に関する属性すべてを適用した後の空間に従います。</p> + +<p>メモ: <code>getBBox</code> は要素がまだレンダリングされていない場合でも、メソッドが呼び出されたときに実際の境界ボックスを返します。また、要素またはその親に適用される変換は無視します。</p> + +<div class="blockIndicator note"> +<p><code>getBBox</code> は {{domxref("Element.getBoundingClientRect()", "getBoundingClientRect()")}} とは異なる値を返します。後者はビューポートからの相対値を返します。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">let bboxRect = object.getBBox();</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>返値は {{domxref("SVGRect")}} オブジェクトで、境界ボックスを定義します。この値はその要素や親要素に適用された変形属性を無視したものです。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js">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);</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG1.1', 'types.html#__svg__SVGLocatable__getBBox', 'getBBox')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初回定義 (SVG 要素のみに適用).</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#getBBox">getBBox in SVG Primer</a></li> +</ul> diff --git a/files/ja/web/api/svggraphicselement/index.html b/files/ja/web/api/svggraphicselement/index.html new file mode 100644 index 0000000000..6ca8f10346 --- /dev/null +++ b/files/ja/web/api/svggraphicselement/index.html @@ -0,0 +1,67 @@ +--- +title: SVGGraphicsElement +slug: Web/API/SVGGraphicsElement +tags: + - API + - NeedsExample + - Reference + - SVG + - SVG OM +translation_of: Web/API/SVGGraphicsElement +--- +<div>{{APIRef("SVG")}}</div> + +<p><strong><code>SVGGraphicsElement</code></strong> インターフェイスは、直接グループにグラフィックを描画することを主な目的とした SVG 要素を表します。</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<div class="note"> +<p><strong>メモ:</strong> このインターフェイスは SVG 2 で導入され、 SVG 1.1 で導入された {{domxref("SVGLocatable")}} および {{domxref("SVGTransformable")}} インターフェイスを置き換えています。</p> +</div> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>このインターフェイスは親である {{domxref("SVGElement")}} からプロパティを継承しています。</em></p> + +<dl> + <dt>{{domxref("SVGGraphicsElement.transform")}} {{ReadOnlyInline}}</dt> + <dd>{{domxref("SVGAnimatedTransformList")}} で、指定された要素の {{cssxref("transform")}} プロパティおよび関連する {{SVGAttr("transform")}} 属性の計算値を反映します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>このインターフェイスは親である {{domxref("SVGElement")}} からメソッドを継承しています。</em></p> + +<dl> + <dt>{{domxref("SVGGraphicsElement.getBBox()")}}</dt> + <dd>{{domxref("DOMRect")}} で、現在の要素の計算上の囲みボックスを返します。</dd> + <dt>{{domxref("SVGGraphicsElement.getCTM()")}}</dt> + <dd>{{domxref("DOMMatrix")}} で、現在の要素の座標系をその SVG ビューポートの座標系に変換する行列を返します。</dd> + <dt>{{domxref("SVGGraphicsElement.getScreenCTM()")}}</dt> + <dd>{{domxref("DOMMatrix")}} で、現在の要素の座標系を SVG 文書フラグメントの SVG ビューポートの座標系に変換する行列を返します。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "types.html#InterfaceSVGGraphicsElement", "SVGGraphicsElement")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.SVGGraphicsElement")}}</p> |