SVGのテキスト要素についてのメモです。
SVGではテキストをグラフィック要素として扱うことができます。なので、表示位置や回転など他の図形同様に考えることができ様々な表現が可能となります。
code<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="100px" viewBox="0 0 400 100">
<circle cx="200" cy="50" r="100" stroke="#0aa2c0" stroke-width="50" fill="#fff"></circle>
<text x="200" y="60" fill="#999" font-family="sans-serif" font-size="32" text-anchor="middle">
＊テスト＊
</text>
</svg>
HTML5からインラインSVGがサポートされました。
HTMLに直接SVGを記述できるようになり、手軽に使用することができますね。
