initial commit

1 files changed, 167 insertions, 0 deletions

diff --git a/files/ja/web/svg/attribute/alignment-baseline/index.html b/files/ja/web/svg/attribute/alignment-baseline/index.html
new file mode 100644
index 0000000000..ad0ae8f224
--- /dev/null
+++ b/files/ja/web/svg/attribute/alignment-baseline/index.html
@@ -0,0 +1,167 @@
+---
+title: alignment-baseline
+slug: Web/SVG/Attribute/alignment-baseline
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/alignment-baseline
+---
+<div>{{SVGRef}}</div>
+
+<p><strong><code>alignment-baseline</code></strong> 属性は、要素が親要素に対して配置される方法を指定します。このプロパティは、要素と親要素の対応するベースラインのどれを揃えるかを指定します。例えば、ローマ字のテキストでフォントサイズが変わった場合でも、アルファベットのベースラインを一定にすることが可能になります。既定値は <code>alignment-baseline</code> プロパティの計算値と同じ名前の値となります。</p>
+
+<p class="note"><strong>注:</strong> プレゼンテーション属性として、 <code>alignment-baseline</code> は CSS プロパティとして使用することができます。</p>
+
+<p>プレゼンテーション属性として、あらゆる要素に適用できますが、効果があるのは {{SVGElement("tspan")}}, {{SVGElement("tref")}}, {{SVGElement("altGlyph")}}, and {{SVGElement("textPath")}} の4つの属性のみです。</p>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">値</th>
+   <td><code>auto</code> | <code>baseline</code> | <code>before-edge</code> | <code>text-before-edge</code> | <code>middle</code> | <code>central</code> | <code>after-edge</code> | <code>text-after-edge</code> | <code>ideographic</code> | <code>alphabetic</code> | <code>hanging</code> | <code>mathematical</code> | <code>top</code> | <code>center</code> | <code>bottom</code></td>
+  </tr>
+  <tr>
+   <th scope="row">既定値</th>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <th scope="row">アニメーション</th>
+   <td>可</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><code>auto</code> {{deprecated_inline}}</dt>
+ <dd>この値はその文字が所属する書法のドミナントベースラインです。すなわち、親のドミナントベースラインを使用します。</dd>
+ <dt><code>baseline</code></dt>
+ <dd>Uses the {{Glossary("dominant baseline")}} choice of the parent. Matches the box’s corresponding {{Glossary("baseline")}} to that of its parent.</dd>
+ <dt><code>before-edge</code> {{deprecated_inline}}</dt>
+ <dd>The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.</dd>
+ <dt><code>text-bottom</code></dt>
+ <dd>Matches the bottom of the box to the top of the parent’s content area.</dd>
+ <dt><code>text-before-edge</code></dt>
+ <dd>
+ <p>The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.</p>
+
+ <p class="note"><strong>Note:</strong> This keyword may be mapped to <code>text-top</code>.</p>
+ </dd>
+ <dt><code>middle</code></dt>
+ <dd>Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.</dd>
+ <dt><code>central</code></dt>
+ <dd>Matches the box’s central baseline to the central baseline of its parent.</dd>
+ <dt><code>after-edge</code> {{deprecated_inline}}</dt>
+ <dd>
+ <p>The alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.</p>
+ </dd>
+ <dt><code>text-top</code></dt>
+ <dd>Matches the top of the box to the top of the parent’s content area.</dd>
+ <dt><code>text-after-edge</code></dt>
+ <dd>
+ <p>The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.</p>
+
+ <p class="note"><strong>Note:</strong> This keyword may be mapped to <code>text-bottom</code>.</p>
+ </dd>
+ <dt><code>ideographic</code></dt>
+ <dd>Matches the box’s ideographic character face under-side baseline to that of its parent.</dd>
+ <dt><code>alphabetic</code></dt>
+ <dd>Matches the box’s alphabetic baseline to that of its parent.</dd>
+ <dt><code>hanging</code></dt>
+ <dd>
+ <p>The alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element.</p>
+ </dd>
+ <dt><code>mathematical</code></dt>
+ <dd>Matches the box’s mathematical baseline to that of its parent.</dd>
+ <dt><code>top</code></dt>
+ <dd>
+ <p>Aligns the top of the aligned subtree with the top of the line box.</p>
+ </dd>
+ <dt><code>center</code></dt>
+ <dd>Aligns the center of the aligned subtree with the center of the line box.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Aligns the bottom of the aligned subtree with the bottom of the line box.</dd>
+</dl>
+
+<p>SVG 2 introduces some changes to the definition of this property. In particular: the values <code>auto</code>, <code>before-edge</code>, and <code>after-edge</code> have been removed. For backwards compatibility, <code>text-before-edge</code> may be mapped to <code>text-top</code> and <code>text-after-edge</code> to <code>text-bottom</code>. Neither <code>text-before-edge</code> nor <code>text-after-edge</code> should be used with the {{cssxref("vertical-align")}} property.</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: html notranslate">&lt;svg width="300" height="120" viewBox="0 0 300 120"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;!-- Materialisation of anchors --&gt;
+    &lt;path d="M60,10 L60,110
+             M30,10 L300,10
+             M30,65 L300,65
+             M30,110 L300,110
+             " stroke="grey" /&gt;
+
+    &lt;!-- Anchors in action --&gt;
+    &lt;text alignment-baseline="hanging"
+          x="60" y="10"&gt;A hanging&lt;/text&gt;
+
+    &lt;text alignment-baseline="middle"
+          x="60" y="65"&gt;A middle&lt;/text&gt;
+
+    &lt;text alignment-baseline="baseline"
+          x="60" y="110"&gt;A baseline&lt;/text&gt;
+
+    &lt;!-- Materialisation of anchors --&gt;
+    &lt;circle cx="60" cy="10" r="3" fill="red" /&gt;
+    &lt;circle cx="60" cy="65" r="3" fill="red" /&gt;
+    &lt;circle cx="60" cy="110" r="3" fill="red" /&gt;
+
+&lt;style&gt;&lt;![CDATA[
+text{
+    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
+}
+]]&gt;&lt;/style&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<p>他の要素 ({{SVGElement("text")}} など) におけるオブジェクトの配置については、 {{SVGAttr("dominant-baseline")}} を参照してください。</p>
+
+<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("CSS3 Inline", "#propdef-alignment-baseline", "alignment-baseline")}}</td>
+   <td>{{Spec2("CSS3 Inline")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "text.html#AlignmentBaselineProperty", "alignment-baseline")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>CSS Inline Layout および注釈を参照し、 <code>auto</code>, <code>before-edge</code>, <code>after-edge</code>, <code>text-before-edge</code>, <code>text-after-edge</code> へ変更</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#AlignmentBaselineProperty", "alignment-baseline")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("svg.attributes.presentation.alignment-baseline")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("alignment-baseline", "CSS alignment-baseline")}}</li>
+</ul>