SVG:文字を描画

svg-text.png

<text x="0" y="20" font-size="10">文字列</text>

font-size
文字の大きさ

text-anchor属性で文字のアライメントを調整

text-anchor属性は、文字列を描画し始める基準位置を指定する属性です。
text-anchor属性が取りうる値は以下の3種類。
start
text要素のx属性/y属性で指定した座標が、文字列の左端に位置するようにテキストが描画されます。
middle
x属性/y属性の座標が文字列のちょうど中央にくるように
end
指定した座標が文字列のちょうど右端に位置するようにテキストが描画される

文字のスタイル

文字に影を施す(アンチエイリアシングする)

このままだと文字がギザギザな感触がするので、シャドウをかけたいと思う。

font-weight="bold"

みたいに、値が一個しかないものはcssと同じ手法で指定できるけど、

text-shadow: 0px 0px 2px #605951;

みたいに複数の値を指定しないと効果がでないものはsvgの中に直接埋め込んでも効き目が無かった。

<style type="text/css" media="screen">  
    svg .shadow { text-shadow: 0px 0px 2px #605951; }   
</style>

みたいにちゃんとcssとして書いて、そして
<text x="30" y="30" font-size="12"  text-anchor="middle"  class="shadow">文字列</text>

クラスに指定すれば影効果が出た。

フルソースコード

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="60" height="60" version="1.1">
    <style type="text/css" media="screen">  
    svg .shadow { text-shadow: 0px 0px 2px #605951; }   
</style>
<g id="surface0">
 <filter id="theBlur"
        filterUnits="userSpaceOnUse"
        x="0" y="0" width="60pt" height="60pt">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
  </filter>
<circle r="25" cx="30" cy="30" style="fill: GreenYellow" filter="url(#theBlur)" ></circle>
<circle r="25" cx="30" cy="30" style="fill: GreenYellow" stroke="OliveDrab"></circle>
<text x="30" y="30" font-size="12"  text-anchor="middle"  class="shadow">現在の</text>
<text x="30" y="45" font-size="12"  text-anchor="middle"   class="shadow">状態</text>
</g>
</svg>

文字に影を入れる

 <style type="text/css" media="screen">  
    svg{ text-shadow: 0px 0px 2px #605951; }   
</style>

text

サポートサイト Wikidot.com text