2008-09-11 17 views
69

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

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

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

+17

私はあなたの水平な仮定に誤りがあると思います。 http://www.w3.org/TR/SVG/text.html#TextAnchorPropertyによると、 'text-anchor'に許される値は' start |ミドル|終わり|継承する。 「左」と「右」は許されない。 – Juve

答えて

58

明示的なテキストパスは必要ないことが判明しました。 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は支配的なベースラインを扱っていないようです(少なくとも同じ方法ではありません)。

+1

悲しいことに、2011年11月現在、Firefoxは引き続き「ドミナントベースライン」をサポートする唯一のブラウザです。私はまだ1/2フォントサイズで設定された ''とする必要があります。 – Travis

+0

私は少なくともChromeでもサポートされていると思います。 – jjmontes

+0

Safariがこれをサポートしているようです。 –

2

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