---
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>