initial commit

2 files changed, 152 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/svggraphicselement/getbbox/index.html b/files/zh-cn/web/api/svggraphicselement/getbbox/index.html
new file mode 100644
index 0000000000..4649341611
--- /dev/null
+++ b/files/zh-cn/web/api/svggraphicselement/getbbox/index.html
@@ -0,0 +1,85 @@
+---
+title: getBBox
+slug: Web/API/SVGGraphicsElement/getBBox
+tags:
+  - SVG
+  - getBBox
+translation_of: Web/API/SVGGraphicsElement/getBBox
+---
+<p><code><strong>SVGGraphicsElement.getBBox()</strong></code>允许我们确定对象适合的最小矩形的坐标。返回的坐标是相对于当前svg空间的，即在将所有几何属性应用于目标元素中包含的所有元素之后。</p>
+
+<p>Note: <code>getBBox</code> must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered. It also neglects any transformation applied on the element or its parents.</p>
+
+<div class="blockIndicator note">
+<p><code>getBBox</code> returns different values than getBoundingClientRect, as the latter returns value relative to the viewport</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">let bboxRect = object.getBBox();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>The returned value is a <a href="/en-US/docs/Web/API/SVGRect">SVGRect</a> object, which defines the bounding box. This value is irrespective of any transformation attribute applied to it or the parent elements.</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
+    &lt;g id="group_text_1"&gt;
+        &lt;text x="5" y="16" transform="scale(2, 2)"&gt;Hello World!&lt;/text&gt;
+        &lt;text x="8" y="32" transform="translate(0 20) scale(1.25 1)"&gt;Hello World Again!&lt;/text&gt;
+    &lt;/g&gt;
+    &lt;!-- Shows BBox in green --&gt;
+    &lt;rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"&gt; &lt;/rect&gt;
+    &lt;!-- Shows BoundingClientRect in red --&gt;
+    &lt;rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"&gt;&lt;/rect&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="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">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'types.html#__svg__SVGLocatable__getBBox', 'getBBox')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition (applies to SVG elements only).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+  </p>
+
+<h2 id="See_also">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/zh-cn/web/api/svggraphicselement/index.html b/files/zh-cn/web/api/svggraphicselement/index.html
new file mode 100644
index 0000000000..6214ff482c
--- /dev/null
+++ b/files/zh-cn/web/api/svggraphicselement/index.html
@@ -0,0 +1,67 @@
+---
+title: SVGGraphicsElement
+slug: Web/API/SVGGraphicsElement
+tags:
+  - API
+  - NeedsExample
+  - NeedsTranslation
+  - Reference
+  - SVG
+  - SVG OM
+  - TopicStub
+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="属性">属性</h2>
+
+<p>此接口还从其父接口{{domxref（“ SVGElement”）}}继承属性</p>
+
+<dl>
+ <dt>{{domxref（“ SVGGraphicsElement.transform”）}} {{ReadOnlyInline}}<br>
+ 一个{{domxref（“ SVGAnimatedTransformList”）}}反映给定元素的{{cssxref（“ transform”）}}属性的计算值及其对应的{{SVGAttr（“ transform”）}}}属性。</dt>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p>此接口还从其父方法{{domxref（“ SVGElement”）}}继承方法。</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="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">说明</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "types.html#InterfaceSVGGraphicsElement", "SVGGraphicsElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。如果您想贡献数据，请查看https://github.com/mdn/browser-compat-data并向我们发送请求请求。</div>
+
+<p>{{Compat("api.SVGGraphicsElement")}}</p>