154

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。

4

5 に答える 5

273

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 の推奨事項を確認してください。

于 2013-04-14T09:19:13.057 に答える
126

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 ドキュメント)の多くのプレゼンテーション属性を実装していないように見えます。

于 2012-09-03T15:14:16.730 に答える
52

attr("支配的なベースライン", "中央")

于 2014-03-04T09:36:46.503 に答える
7

SVG 勧告を見た後、ベースライン プロパティは、特に異なるフォントや言語が混在している場合に、他のテキストに対して相対的にテキストを配置するためのものであることがわかりました。テキストを上に配置する場合は、yを使用する必要がありますdy = "y + the height of your text"。

于 2015-01-25T20:51:23.080 に答える