70

行と短いテキスト スニペット (通常は 2 つまたは 3 つの単語) が混在する SVG XML ドキュメントを作成しようとしています。私が抱えている主な問題は、テキストを線分に揃えることです。

水平方向の配置にはtext-anchor、left、middleまたはを使用できますright。垂直方向の配置に相当するものが見つかりません。alignment-baselineしそうにないので、現在はdy="0.5ex"センター合わせのおまけとして使っています。

テキストの垂直方向の中央または上部に揃える適切な方法はありますか?

4

2 に答える 2

61

明示的なテキスト パスは必要ないことがわかりました。Firefox 3 は、垂直方向の配置タグを部分的にしかサポートしていません (このスレッドを参照してください)。また、dominant-baseline はスタイルとして適用された場合にのみ機能するようですが、text-anchor はスタイルまたはタグ属性の一部にすることができます。

<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 はdominant-baseline を処理していないようです (少なくとも同じ方法では処理していません)。

于 2008-09-16T14:57:13.937 に答える
2

この効果は、またはに設定alignment-baselineすることで実現できます。centralmiddle

于 2014-05-15T14:25:49.127 に答える