alignment-baseline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

alignment-baseline 属性は、要素が親要素に対して配置される方法を指定します。このプロパティは、要素と親要素の対応するベースラインのどれを揃えるかを指定します。例えば、ローマ体のテキストでフォントサイズが変わった場合でも、アルファベットのベースラインを一定にすることができます。既定値はalignment-baseline プロパティの計算値と同じ名前の値となります。

メモ:プレゼンテーション属性であるため、alignment-baseline には対応する CSS プロパティalignment-baseline があります。両方が指定された場合、 CSS プロパティの方が優先されます。

この属性は以下の SVG 要素で使用することができます。

使用上の注意

値	`auto` \|`baseline` \|`before-edge` \|`text-before-edge` \|`middle` \|`central` \|`after-edge` \|`text-after-edge` \|`ideographic` \|`alphabetic` \|`hanging` \|`mathematical` \|`top` \|`center` \|`bottom`
既定値	`auto`
アニメーション	可

auto非推奨;: この値はその文字が所属する書法の主要ベースラインです。すなわち、親の主要ベースラインを使用します。
baseline: 親のdominant-baseline の選択を使用します。ボックスの対応するベースラインを親のベースラインと一致させます。
before-edge非推奨;: 配置されるオブジェクトの配置点は、親テキストコンテンツ要素の "before-edge" ベースラインに配置されます。
text-bottom: ボックスの底辺と親コンテンツエリアの上端を一致させます。
text-before-edge: 配置されるオブジェクトの配置点は、親テキストコンテンツ要素の"text-before-edge" ベースラインに配置されます。
メモ:このキーワードはtext-top に対応付けられることがあります。
middle: ボックスの縦方向の中点を、親ボックスのベースラインと親の x 高の半分に配置します。
central: ボックスの中央ベースラインを親の中央ベースラインと一致させます。
after-edge非推奨;: 配置されるオブジェクトの配置点は、親テキストコンテンツ要素の "after-edge" ベースラインと揃えられます。
text-top: ボックスの上端と親コンテンツエリアの上端を一致させます。
text-after-edge: 配置されるオブジェクトの配置点は、親テキストコンテンツ要素の "text-after-edge" ベースラインに配置されます。
メモ:このキーワードはtext-bottom に対応付けられることがあります。
ideographic: ボックスの表意文字の文字面のベースラインを、その親のベースラインと一致させます。
alphabetic: ボックスのアルファベットのベースラインを親のベースラインと一致させます。
hanging: 配置されるオブジェクトの配置点は、親テキストコンテンツ要素の「ぶら下がり」ベースラインに揃えられます。
mathematical: ボックスの数式用のベースラインを親のベースラインと一致させます。
top: 配置されたサブツリーの先頭を、行ボックスの先頭に揃えます。
center: 配置されたサブツリーの中心を行ボックスの中心に合わせます。
bottom: 配置されたサブツリーの底辺を行ボックスの底辺に揃えます。

SVG 2 では、このプロパティの定義にいくつかの変更が加えられました。具体的な変更点としては、auto、before-edge、after-edge の値が除去されました。後方互換性を維持するために、text-before-edge はtext-top に、text-after-edge はtext-bottom に割り当てられる可能性があります。text-before-edge およびtext-after-edge は、 vertical-align プロパティと併用しないようにしましょう。

例

html

<svg  width="300"  height="120"  viewBox="0 0 300 120"  xmlns="http://www.w3.org/2000/svg">  <!-- Materialization of anchors -->  <path    d="M60,10 L60,110              M30,10 L300,10              M30,65 L300,65              M30,110 L300,110              "    stroke="grey" />  <!-- Anchors in action -->  <text alignment-baseline="hanging" x="60" y="10">ぶら下がり</text>  <text alignment-baseline="middle" x="60" y="65">中央</text>  <text alignment-baseline="baseline" x="60" y="110">ベースライン</text>  <!-- Materialization of anchors -->  <circle cx="60" cy="10" r="3" fill="red" />  <circle cx="60" cy="65" r="3" fill="red" />  <circle cx="60" cy="110" r="3" fill="red" />  <style>    <![CDATA[      text{        font: bold 36px Verdana, Helvetica, Arial, sans-serif;      }    ]]>  </style></svg>

他の要素（<text> など）におけるオブジェクトの配置については、dominant-baseline を参照してください。