SVG “text”要素

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を記述できるようになり、手軽に使用することができますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です