SVGについて – テキストについて
SVGでテキスト出力について試してみます。
簡単なサンプルとして以下のコードを用意しました。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="200" height="200" viewBox="0 0 200 200"> <text x="0" y="20" dx="0" dy="0" > テキストのテスト </text> </svg> </body> </html>
画面にアクセスすると、「テキストのテスト」という文字列が表示されます。
viewBoxで指定した領域に、text要素を定義しているだけのシンプルなものです。
このサンプルを基に、text要素の各パラメータについて調べます。
SVGについて – テキストのrotate属性について
先程のサンプルのtext要素に、rotate属性を追加し値を20に設定してみます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="200" height="200" viewBox="0 0 200 200"> <text x="0" y="20" dx="0" dy="0" rotate="20" > テキストのテスト </text> </svg> </body> </html>
画面にアクアスすると、各文字列に対して20度の角度がついていることがわかります。