SVGのテキストの整列

Question

SVG XML文書に、行と短いテキストスニペット（通常は2〜3語）が混在するようにしようとしています。私が抱えている大きな問題は、テキストを線分で整列させることです。

私はtext-anchorとleft、middleまたはrightを使用することができます。私は垂直配列のための等価物を見つけることができません。 alignment-baselineはそれをしていないようですので、現在私はdy="0.5ex"をセンターアライメントのためのクルーグとして使用しています。

テキストの縦方向の中央または上に整列させる適切な方法はありますか？

Answer 1

明示的なテキストパスは必要ないことが判明しました。 Firefox 3では、垂直配置タグ（see this thread）の部分的なサポートしかありません。また、ドミナントベースラインはスタイルとして適用された場合にのみ機能し、テキストアンカーはスタイルまたはタグ属性の一部である可能性があります。

<path d="M10, 20 L17, 20" 
     style="fill:none; color:black; stroke:black; stroke-width:1.00"/> 
<text fill="black" font-family="sans-serif" font-size="16" 
     x="27" y="20" style="dominant-baseline: central;"> 
    Vertical 
</text> 

<path d="M60, 40 L60, 47" 
     style="fill:none; color:red; stroke:red; stroke-width:1.00"/> 
<text fill="red" font-family="sans-serif" font-size="16" 
     x="60" y="70" style="text-anchor: middle;"> 
    Horizontal 
</text> 

<path d="M60, 90 L60, 97" 
     style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/> 
<text fill="blue" font-family="sans-serif" font-size="16" 
     x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;"> 
    Bit of Both 
</text> 

これはFirefoxで動作します。残念ながら、Inkscapeは支配的なベースラインを扱っていないようです（少なくとも同じ方法ではありません）。

Answer 2

alignment-baselineからcentralまたはmiddleに設定することで、この効果を実際に達成できます。