web-dev-qa-db-ja.com

SVGのテキスト要素の垂直方向の配置

私がSVGファイルを持っているとしましょう：

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

aとbの上部を何らかの方法で揃えたい。実際、rooflineではなくbaselineに基づいてポジショニングを行いたいです！

svgvertical-alignmentw3c
132
SeMeKh

alignment-baselineプロパティはあなたが探しているもので、次の値を取ることができます

auto | baseline | before-Edge | text-before-Edge | 
middle | central | after-Edge | text-after-Edge | 
ideographic | alphabetic | hanging | mathematical | 
inherit

W3cからの説明

このプロパティは、オブジェクトが親に​​対してどのように配置されるかを指定します。このプロパティは、この要素のどのベースラインを、親の対応するベースラインに合わせるかを指定します。たとえば、これにより、ローマ字テキストのアルファベットのベースラインを、フォントサイズの変更に合わせて揃えることができます。デフォルトでは、alignment-baselineプロパティの計算値と同じ名前のベースラインになります。つまり、ブロック進行方向の「表意文字」整列点の位置は、整列されるオブジェクトのベースライン表の「表意文字」ベースラインの位置です。

W3Cソース

残念ながら、これは、FirefoxがSVGテキストモジュールのプレゼンテーション属性の多くを実装していないように見える後の状態を達成する「正しい」方法ですが（ 'SVG in Firefox' MDN Documentation ）

113
Simon West

SVG仕様によると、alignment-baselineは<tspan>、<textPath>、<tref>、および<altGlyph>にのみ適用されます。私の理解では、それはそれらの上の<text>オブジェクトからそれらを相殺するために使用されるということです。あなたが探しているのはdominant-baselineだと思います。

dominant-baselineの可能な値は次のとおりです。

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-Edge | text-before-Edge | inherit

可能な各値の詳細については、 dominant-baselineプロパティのW3C勧告 を確認してください。

206
toutankh

attr（ "dominant-baseline"、 "central"）

44
user1087079

IEでこれをテストしている場合、dominant-baselineとalignment-baselineはサポートされていません。

IEでテキストを中央に配置する最も効果的な方法は、「dy」で次のようなものを使用することです。

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

負の値は上にシフトし、dyの正の値は下にシフトします。 -.4emの使用は、-。5emよりも垂直方向の中心が少し高いように見えますが、その判断はあなたが行います。

28
whyoz

SVG推奨 を見た後、特に異なるフォントや言語を混在させる場合、ベースラインプロパティは他のテキストに対してテキストを配置することを意図していることがわかりました。最上位がyになるようにテキストを配置する場合は、dy = "y + the height of your text"を使用する必要があります。

7
rjax