文字（テキスト）の処理
最後にSVGでテキストを処理してみましょう。SVGでテキストを描くには<text>タグを使います。表示するX座標はx属性で、Y座標はy属性で指定します。このX,Y座標は文字のベースラインの座標になります。以下のように指定すると座標(5, 10)にAの文字が表示されます。
<text x="5" y="10">A</text>
文字の色などはこれまで説明した図形とまったく同じ方法で変更できます。サンプル11はボタンをクリックすると文字の色を赤に変更します。
ボタンをクリックすると文字の色が赤になる
■サンプル11[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JavaScriptでSVGテキストを表示</title> </head> <body> <h1>JavaScriptでSVGテキストを表示</h1> <form> <input type="button" id="change" value="変更"> </form> <svg width="100%" height="300"> <text id="myText" x="5" y="18">SVG and JavaScriptサンプル</text> </svg> <script type="text/javascript"> document.getElementById("change").addEventListener("click", function(){ var txt = document.getElementById("myText"); // SVGテキスト txt.setAttribute("fill", "#ff0000"); }, true); </script> </body> </html>
SVGテキストの内容もJavaScriptで変更できます。サンプル12はボタンをクリックするとSVGテキストの内容が書き換わります。
ボタンをクリックすると違う文字が表示される
■サンプル12[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JavaScriptでSVGテキストを入れ替える</title> </head> <body> <h1>JavaScriptでSVGテキストを入れ替える</h1> <form> <input type="button" id="change" value="変更"> </form> <svg width="100%" height="300"> <text id="myText" x="5" y="18">SVG and JavaScriptサンプル</text> </svg> <script type="text/javascript"> document.getElementById("change").addEventListener("click", function(){ var txt = document.getElementById("myText"); // SVGテキスト txt.textContent = "テキストも入れ替えることができます"; }, true); </script> </body> </html>
文字の書き換えとタイマーを組み合わせると、現在時刻を表示するリアルタイムクロックのようなプログラムを作成できます（サンプル13）。
リアルタイムにSVGで時計が表示される
■サンプル13[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JavaScriptでSVGクロック</title> </head> <body> <h1>JavaScriptでSVGクロック</h1> <svg width="100%" height="300"> <text id="myText" x="5" y="18">00:00:00</text> </svg> <script type="text/javascript"> setInterval(function(){ var dateObj = new Date(); var h = "0"+dateObj.getHours(); var m = "0"+dateObj.getMinutes(); var s = "0"+dateObj.getSeconds(); h = h.substr(h.length-2, 2); m = m.substr(m.length-2, 2); s = s.substr(s.length-2, 2); var txt = document.getElementById("myText"); // SVGテキスト txt.textContent = h+":"+m+":"+s; txt.setAttribute("transform", "scale(5)"); }, 1000); </script> </body> </html>
次回は、SVGアニメーションとSVGを使ったゲームを作成します。お楽しみに。
