SVG Textのtext-anchor属性をつかってみた。

最近、HTMLファイル内にSVGを直接記述できる「Inline SVG」と格闘中のkadoppeです。

今日は、たまたまSVGのtext要素を使って文字列を中央揃えにする必要があったので、それを実現するために使ったtext要素の「text-anchor」属性について簡単にメモしておきたいと思います。

text-anchor属性

text-anchor属性は、文字列を描画し始める基準位置を指定する属性です。

text-anchor属性が取りうる値は以下の3種類。

  • start
  • middle
  • end

「start」を指定すると、text要素のx属性/y属性で指定した座標が、文字列の左端に位置するようにテキストが描画されます。

「middle」は、x属性/y属性の座標が文字列のちょうど中央にくるように。(今回僕が使ったのはこれ)

最後の「end」は、指定した座標が文字列のちょうど右端に位置するようにテキスト画鋲がされます。

それぞれを実際に描画してみた結果が以下。

わかりやすいように赤い直線を引いてみました。

text-anchor属性の値によって、それぞれテキストの描画位置が変化していることがわかりますね。

まとめ・余談

「Inline SVG」の登場によって、HTMLの世界にベクターグラフィックスを導入することが容易になり、できることも増えたわけなんですが、同時に覚えることも多くなりました。少しずつ実際に試しながら勉強していきたいところです。

今回はじめて使いましたが、ちょっと小さいコードを試しに動かしたいときに「jsFiddle」がとても便利だと思いました。みなさんもぜひ使ってみたください。

それでは!