水無月ばけらのえび日記

テキストの改行

HTMLの場合は、要素内に適当にテキストを書くと、その要素の中にテキストが表示されます。要素の幅に対して長いテキストが入った場合は、テキストは自動的に改行されます。

SVG1.1の場合、テキストを置くにはtext要素を使い、text要素自体にx属性、y属性で座標を指定して配置します。この要素には幅という概念がなく、テキストが自動で折り返されることはありません。SVG1.1では「自動改行はない」という旨がはっきり書いてあります。

改行するするための方法は3つ挙げられています。

• text要素を複数使い、それぞれに良い感じの座標を指定する
• text要素の中でtspan要素を複数使い、それぞれに良い感じの座標を指定する
• SVG以外の手段に頼る (たとえばXHTMLを埋め込む)

text要素を複数使うと、それぞれのテキストは別々の塊とみなされます。たとえば、選択するときにひとかたまりに選択できなかったりする可能性があります。単なる折り返しの場合はtspan要素を使うのが良いでしょう。

といっても、tspanを使えば改行されるというわけではなく、個々のtspanに座標を指定する必要があるので面倒ですが。

テキストのセンタリング

HTMLの場合、CSSのtext-alignプロパティを使えばすぐにセンタリングできます。

SVG1.1では、text-anchor (www.w3.org)を middle に設定します。ただしこの場合、指定した座標がテキストの中心になるように、座標から左右に向かってテキストが伸びる形になります。座標を変えずにtext-anchorをstartからmiddleに変えると、テキストの位置は左にずれます。

※左と書きましたが、これは書字方向がLTRの場合です。text-anchorにはleft, rightという指定はなく、start, endがあります。初期値はstartですが、これは書字方向がLTRなら座標の位置が左端に、RTLなら右端になるという指定です。left, rightという指定方法よりも格好いいと個人的には思います。

style要素を使って指定することもできます。画像内のすべてのテキストをセンタリングにする場合は、以下のように書いておくと楽です。

text-anchorは継承されますので、textに指定すると子要素のtspanにも指定が効きます。

テキストのサイズ

フォントまわりでは、HTMLと同じようにfont-sizeやfont-familyなどが使えます。ほとんどの場合、複数のテキストに同じサイズ、同じフォントを指定すると思いますので、style要素で指定するのが便利だと思います。

ブラウザによっては、SVG内のテキストにも最小フォントサイズの指定が有効なので注意が必要です。少なくともChromeでは、SVG画像を縮小しても、テキストのサイズは一定以下にならないようです。テキストの周囲の図や枠などはいくらでも小さくなりますので、テキストがはみ出したり、重なったりする可能性があります。

逆に、Chrome以外のブラウザではテキストが際限なく縮小されます。これはこれで、読めないほど小さくなってしまうおそれがあります。

Media Queries

SVG画像の中でstyle要素を使ってCSSを書くことができるのですが、このとき、Media Queries (www.w3.org)が使えます。少なくともIE9, Firefox10,Chrome17では有効でした。

SVGを使う場合、画像が拡大・縮小されることを想定しているケースが多いと思います。Media Queriesを使うと、縮小されたとき、あるいは拡大されたときにだけ異なるスタイルを適用することができるようになり、SVGの幅が広がります。

先に述べた「Chromeだけ最小フォントサイズがある」という問題についても、むしろ縮小時にフォントサイズを大きくするようなスタイルを指定することで、他のブラウザの挙動をChromeに近づけることができます。